chore: copia de libs/shared con prefijo Pi y APIs de terceros actualizadas
This commit is contained in:
@@ -1,22 +0,0 @@
|
||||
# This file is generated by Nx.
|
||||
# Build the docker image with `npx nx docker:build api`.
|
||||
# Tip: Modify "docker:build" options in project.json to change docker build args.
|
||||
#
|
||||
# Run the container with `nx docker:run api -p 3000:3000`.
|
||||
#
|
||||
FROM docker.io/node:lts-alpine
|
||||
|
||||
ENV HOST=0.0.0.0
|
||||
ENV PORT=3333
|
||||
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY dist .
|
||||
|
||||
# You can remove this install step if you build with `--bundle` option.
|
||||
# The bundled output will include external dependencies.
|
||||
|
||||
RUN npm --omit=dev -f install
|
||||
|
||||
CMD [ "node", "main.js" ]
|
||||
@@ -1,3 +0,0 @@
|
||||
import baseConfig from '../../eslint.config.mjs';
|
||||
|
||||
export default [...baseConfig];
|
||||
@@ -1,73 +0,0 @@
|
||||
{
|
||||
"name": "api",
|
||||
"$schema": "../../node_modules/nx/schemas/project-schema.json",
|
||||
"sourceRoot": "apps/api/src",
|
||||
"projectType": "application",
|
||||
"tags": ["scope:api"],
|
||||
"release": {
|
||||
"docker": {
|
||||
"repositoryName": "org/angular-template-api"
|
||||
}
|
||||
},
|
||||
"targets": {
|
||||
"build": {
|
||||
"executor": "@nx/esbuild:esbuild",
|
||||
"outputs": ["{options.outputPath}"],
|
||||
"defaultConfiguration": "production",
|
||||
"options": {
|
||||
"platform": "node",
|
||||
"outputPath": "apps/api/dist",
|
||||
"format": ["cjs"],
|
||||
"bundle": false,
|
||||
"main": "apps/api/src/main.ts",
|
||||
"tsConfig": "apps/api/tsconfig.app.json",
|
||||
"assets": ["apps/api/src/assets"],
|
||||
"generatePackageJson": true,
|
||||
"esbuildOptions": {
|
||||
"sourcemap": true,
|
||||
"outExtension": {
|
||||
".js": ".js"
|
||||
}
|
||||
}
|
||||
},
|
||||
"configurations": {
|
||||
"development": {},
|
||||
"production": {
|
||||
"generateLockfile": true,
|
||||
"esbuildOptions": {
|
||||
"sourcemap": false,
|
||||
"outExtension": {
|
||||
".js": ".js"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"serve": {
|
||||
"continuous": true,
|
||||
"executor": "@nx/js:node",
|
||||
"defaultConfiguration": "development",
|
||||
"dependsOn": ["build"],
|
||||
"options": {
|
||||
"buildTarget": "api:build",
|
||||
"runBuildTargetDependencies": false
|
||||
},
|
||||
"configurations": {
|
||||
"development": {
|
||||
"buildTarget": "api:build:development"
|
||||
},
|
||||
"production": {
|
||||
"buildTarget": "api:build:production"
|
||||
}
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
"options": {
|
||||
"passWithNoTests": true
|
||||
}
|
||||
},
|
||||
"docker:build": {
|
||||
"dependsOn": ["build"]
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,139 +0,0 @@
|
||||
import express from 'express';
|
||||
import { ProductsService } from '@org/api/products';
|
||||
import { ApiResponse, Product, ProductFilter, PaginatedResponse } from '@org/models';
|
||||
|
||||
const host = process.env.HOST ?? 'localhost';
|
||||
const port = process.env.PORT ? Number(process.env.PORT) : 3333;
|
||||
|
||||
const app = express();
|
||||
const productsService = new ProductsService();
|
||||
|
||||
// Middleware
|
||||
app.use(express.json());
|
||||
|
||||
// CORS configuration for Angular app
|
||||
app.use((req, res, next) => {
|
||||
res.header('Access-Control-Allow-Origin', '*');
|
||||
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
|
||||
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
|
||||
if (req.method === 'OPTIONS') {
|
||||
res.sendStatus(200);
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
});
|
||||
|
||||
app.get('/', (req, res) => {
|
||||
res.send({ message: 'Hello API' });
|
||||
});
|
||||
|
||||
// Products endpoints
|
||||
app.get('/api/products', (req, res) => {
|
||||
try {
|
||||
const filter: ProductFilter = {};
|
||||
|
||||
if (req.query.category) {
|
||||
filter.category = req.query.category as string;
|
||||
}
|
||||
if (req.query.minPrice) {
|
||||
filter.minPrice = Number(req.query.minPrice);
|
||||
}
|
||||
if (req.query.maxPrice) {
|
||||
filter.maxPrice = Number(req.query.maxPrice);
|
||||
}
|
||||
if (req.query.inStock !== undefined) {
|
||||
filter.inStock = req.query.inStock === 'true';
|
||||
}
|
||||
if (req.query.searchTerm) {
|
||||
filter.searchTerm = req.query.searchTerm as string;
|
||||
}
|
||||
|
||||
const page = req.query.page ? Number(req.query.page) : 1;
|
||||
const pageSize = req.query.pageSize ? Number(req.query.pageSize) : 12;
|
||||
|
||||
const result = productsService.getAllProducts(filter, page, pageSize);
|
||||
|
||||
const response: ApiResponse<PaginatedResponse<Product>> = {
|
||||
data: result,
|
||||
success: true,
|
||||
};
|
||||
|
||||
res.json(response);
|
||||
} catch (error) {
|
||||
const response: ApiResponse<null> = {
|
||||
data: null,
|
||||
success: false,
|
||||
error: error instanceof Error ? error.message : 'Unknown error',
|
||||
};
|
||||
res.status(500).json(response);
|
||||
}
|
||||
});
|
||||
|
||||
app.get('/api/products/:id', (req, res) => {
|
||||
try {
|
||||
const product = productsService.getProductById(req.params.id);
|
||||
|
||||
if (!product) {
|
||||
const response: ApiResponse<null> = {
|
||||
data: null,
|
||||
success: false,
|
||||
error: 'Product not found',
|
||||
};
|
||||
return res.status(404).json(response);
|
||||
}
|
||||
|
||||
const response: ApiResponse<Product> = {
|
||||
data: product,
|
||||
success: true,
|
||||
};
|
||||
|
||||
res.json(response);
|
||||
} catch (error) {
|
||||
const response: ApiResponse<null> = {
|
||||
data: null,
|
||||
success: false,
|
||||
error: error instanceof Error ? error.message : 'Unknown error',
|
||||
};
|
||||
res.status(500).json(response);
|
||||
}
|
||||
});
|
||||
|
||||
app.get('/api/products-metadata/categories', (req, res) => {
|
||||
try {
|
||||
const categories = productsService.getCategories();
|
||||
const response: ApiResponse<string[]> = {
|
||||
data: categories,
|
||||
success: true,
|
||||
};
|
||||
res.json(response);
|
||||
} catch (error) {
|
||||
const response: ApiResponse<null> = {
|
||||
data: null,
|
||||
success: false,
|
||||
error: error instanceof Error ? error.message : 'Unknown error',
|
||||
};
|
||||
res.status(500).json(response);
|
||||
}
|
||||
});
|
||||
|
||||
app.get('/api/products-metadata/price-range', (req, res) => {
|
||||
try {
|
||||
const priceRange = productsService.getPriceRange();
|
||||
const response: ApiResponse<{ min: number; max: number }> = {
|
||||
data: priceRange,
|
||||
success: true,
|
||||
};
|
||||
res.json(response);
|
||||
} catch (error) {
|
||||
const response: ApiResponse<null> = {
|
||||
data: null,
|
||||
success: false,
|
||||
error: error instanceof Error ? error.message : 'Unknown error',
|
||||
};
|
||||
res.status(500).json(response);
|
||||
}
|
||||
});
|
||||
|
||||
app.listen(port, host, () => {
|
||||
console.log(`[ ready ] http://${host}:${port}`);
|
||||
});
|
||||
@@ -1,10 +0,0 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../dist/out-tsc",
|
||||
"module": "commonjs",
|
||||
"types": ["node"]
|
||||
},
|
||||
"include": ["src/**/*.ts"],
|
||||
"exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.base.json",
|
||||
"files": [],
|
||||
"include": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.app.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.spec.json"
|
||||
}
|
||||
],
|
||||
"compilerOptions": {
|
||||
"esModuleInterop": true
|
||||
}
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../dist/out-tsc",
|
||||
"types": [
|
||||
"vitest/globals",
|
||||
"vitest/importMeta",
|
||||
"vite/client",
|
||||
"node",
|
||||
"vitest"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"vite.config.ts",
|
||||
"vite.config.mts",
|
||||
"vitest.config.ts",
|
||||
"vitest.config.mts",
|
||||
"src/**/*.test.ts",
|
||||
"src/**/*.spec.ts",
|
||||
"src/**/*.test.tsx",
|
||||
"src/**/*.spec.tsx",
|
||||
"src/**/*.test.js",
|
||||
"src/**/*.spec.js",
|
||||
"src/**/*.test.jsx",
|
||||
"src/**/*.spec.jsx",
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import tsconfigPaths from 'vite-tsconfig-paths';
|
||||
import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
|
||||
|
||||
export default defineConfig(() => ({
|
||||
root: __dirname,
|
||||
cacheDir: '../../node_modules/.vite/apps/api',
|
||||
plugins: [tsconfigPaths(), nxCopyAssetsPlugin(['*.md'])],
|
||||
test: {
|
||||
name: 'api',
|
||||
watch: false,
|
||||
globals: true,
|
||||
environment: 'node',
|
||||
include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
|
||||
reporters: ['default'],
|
||||
passWithNoTests: true,
|
||||
coverage: {
|
||||
reportsDirectory: '../../coverage/apps/api',
|
||||
provider: 'v8' as const,
|
||||
},
|
||||
},
|
||||
}));
|
||||
@@ -1,12 +0,0 @@
|
||||
import playwright from 'eslint-plugin-playwright';
|
||||
import baseConfig from '../../eslint.config.mjs';
|
||||
|
||||
export default [
|
||||
playwright.configs['flat/recommended'],
|
||||
...baseConfig,
|
||||
{
|
||||
files: ['**/*.ts', '**/*.js'],
|
||||
// Override or add rules here
|
||||
rules: {},
|
||||
},
|
||||
];
|
||||
@@ -1,70 +0,0 @@
|
||||
import { defineConfig, devices } from '@playwright/test';
|
||||
import { nxE2EPreset } from '@nx/playwright/preset';
|
||||
import { workspaceRoot } from '@nx/devkit';
|
||||
|
||||
// For CI, you may want to set BASE_URL to the deployed application.
|
||||
const baseURL = process.env['BASE_URL'] || 'http://localhost:4200';
|
||||
|
||||
/**
|
||||
* Read environment variables from file.
|
||||
* https://github.com/motdotla/dotenv
|
||||
*/
|
||||
// require('dotenv').config();
|
||||
|
||||
/**
|
||||
* See https://playwright.dev/docs/test-configuration.
|
||||
*/
|
||||
export default defineConfig({
|
||||
...nxE2EPreset(__filename, { testDir: './src' }),
|
||||
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
|
||||
use: {
|
||||
baseURL,
|
||||
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
|
||||
trace: 'on-first-retry',
|
||||
},
|
||||
/* Run your local dev server before starting the tests */
|
||||
webServer: {
|
||||
command: 'npx nx run shop:serve',
|
||||
url: 'http://localhost:4200',
|
||||
reuseExistingServer: true,
|
||||
cwd: workspaceRoot,
|
||||
},
|
||||
projects: [
|
||||
{
|
||||
name: 'chromium',
|
||||
use: { ...devices['Desktop Chrome'] },
|
||||
},
|
||||
// Uncomment to test wider variety of browsers
|
||||
// Note, you will also need to update `.github/workflows/ci.yml`
|
||||
// Replacing `npx playwright install --only-shell` with `npx playwright install --with-deps`
|
||||
// {
|
||||
// name: 'firefox',
|
||||
// use: { ...devices['Desktop Firefox'] },
|
||||
// },
|
||||
|
||||
// {
|
||||
// name: 'webkit',
|
||||
// use: { ...devices['Desktop Safari'] },
|
||||
// },
|
||||
|
||||
// Uncomment for mobile browsers support
|
||||
/* {
|
||||
name: 'Mobile Chrome',
|
||||
use: { ...devices['Pixel 5'] },
|
||||
},
|
||||
{
|
||||
name: 'Mobile Safari',
|
||||
use: { ...devices['iPhone 12'] },
|
||||
}, */
|
||||
|
||||
// Uncomment for branded browsers
|
||||
/* {
|
||||
name: 'Microsoft Edge',
|
||||
use: { ...devices['Desktop Edge'], channel: 'msedge' },
|
||||
},
|
||||
{
|
||||
name: 'Google Chrome',
|
||||
use: { ...devices['Desktop Chrome'], channel: 'chrome' },
|
||||
} */
|
||||
],
|
||||
});
|
||||
@@ -1,8 +0,0 @@
|
||||
{
|
||||
"name": "shop-e2e",
|
||||
"$schema": "../../node_modules/nx/schemas/project-schema.json",
|
||||
"projectType": "application",
|
||||
"sourceRoot": "apps/shop-e2e/src",
|
||||
"implicitDependencies": ["shop"],
|
||||
"targets": {}
|
||||
}
|
||||
@@ -1,162 +0,0 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test.describe('Navigation and User Flow', () => {
|
||||
test('should complete a full user journey through the app', async ({ page }) => {
|
||||
// Start at home page
|
||||
await page.goto('/');
|
||||
|
||||
// Should redirect to products
|
||||
await page.waitForURL('**/products');
|
||||
|
||||
// Verify we're on products page
|
||||
const productsHeading = page.locator('h1:has-text("Our Products")');
|
||||
await expect(productsHeading).toBeVisible();
|
||||
|
||||
// Search for a specific product
|
||||
const searchInput = page.locator('input[placeholder*="Search"]');
|
||||
await searchInput.fill('Product 1');
|
||||
await page.waitForFunction(() => document.querySelectorAll('[class*="product-card"]').length > 0);
|
||||
|
||||
// Click on the first search result
|
||||
const firstResult = page.locator('[class*="product-card"]').first();
|
||||
const productName = await firstResult.locator('h3').textContent();
|
||||
await firstResult.click();
|
||||
|
||||
// Should navigate to product detail
|
||||
await page.waitForURL('**/products/**');
|
||||
|
||||
// Verify product detail page
|
||||
const detailProductName = page.locator('h1').filter({ hasText: productName || '' });
|
||||
await expect(detailProductName).toBeVisible();
|
||||
|
||||
// Click back to products
|
||||
const backLink = page.locator('a:has-text("Back to Products")');
|
||||
await backLink.click();
|
||||
|
||||
// Should be back on products page
|
||||
await page.waitForURL('**/products');
|
||||
await expect(productsHeading).toBeVisible();
|
||||
|
||||
// The search should be cleared
|
||||
await expect(searchInput).toHaveValue('');
|
||||
});
|
||||
|
||||
test('should handle navigation via header link', async ({ page }) => {
|
||||
// Start on a product detail page
|
||||
await page.goto('/products/prod-1');
|
||||
await page.waitForLoadState('domcontentloaded');
|
||||
|
||||
// Click the Products link in the header
|
||||
const headerProductsLink = page.locator('nav a:has-text("Products")');
|
||||
await headerProductsLink.click();
|
||||
|
||||
// Should navigate to products listing
|
||||
await page.waitForURL('**/products');
|
||||
|
||||
// Verify products page is loaded
|
||||
const productsGrid = page.locator('[class*="product"]').first();
|
||||
await expect(productsGrid).toBeVisible();
|
||||
});
|
||||
|
||||
test('should maintain filter state during navigation', async ({ page }) => {
|
||||
// Go to products page
|
||||
await page.goto('/products');
|
||||
await page.waitForLoadState('domcontentloaded');
|
||||
|
||||
// Apply filters
|
||||
const categoryDropdown = page.locator('select');
|
||||
await categoryDropdown.selectOption('Electronics');
|
||||
|
||||
const searchInput = page.locator('input[placeholder*="Search"]');
|
||||
await searchInput.fill('Product');
|
||||
|
||||
// Wait for filtered results
|
||||
await page.waitForFunction(() => document.querySelectorAll('[class*="product-card"]').length > 0);
|
||||
|
||||
// Navigate to a product
|
||||
const product = page.locator('[class*="product-card"]').first();
|
||||
await product.click();
|
||||
|
||||
// Wait for product detail page
|
||||
await page.waitForURL('**/products/**');
|
||||
|
||||
// Go back using browser back button
|
||||
await page.goBack();
|
||||
|
||||
// Filters should be reset (this is the expected behavior in most SPAs)
|
||||
// The search and category should be cleared
|
||||
await expect(searchInput).toHaveValue('');
|
||||
await expect(categoryDropdown).toHaveValue('');
|
||||
});
|
||||
|
||||
test('should handle rapid navigation', async ({ page }) => {
|
||||
// Navigate to products
|
||||
await page.goto('/products');
|
||||
|
||||
// Quickly click multiple products
|
||||
for (let i = 0; i < 3; i++) {
|
||||
const product = page.locator('[class*="product-card"]').nth(i);
|
||||
await product.click();
|
||||
await page.waitForURL('**/products/**');
|
||||
|
||||
// Verify page loaded correctly
|
||||
const productDetail = page.locator('h1').nth(1);
|
||||
await expect(productDetail).toBeVisible();
|
||||
|
||||
// Go back
|
||||
const backLink = page.locator('a:has-text("Back to Products")');
|
||||
await backLink.click();
|
||||
await page.waitForURL('**/products');
|
||||
}
|
||||
|
||||
// Should still be functional
|
||||
const productsHeading = page.locator('h1:has-text("Our Products")');
|
||||
await expect(productsHeading).toBeVisible();
|
||||
});
|
||||
|
||||
test('should handle direct URL navigation', async ({ page }) => {
|
||||
// Navigate directly to a product detail page
|
||||
await page.goto('/products/prod-5');
|
||||
await page.waitForLoadState('domcontentloaded');
|
||||
|
||||
// Should load the correct product
|
||||
const productName = page.locator('h1').filter({ hasText: 'Product 5' });
|
||||
await expect(productName).toBeVisible();
|
||||
|
||||
// Navigate directly to products page
|
||||
await page.goto('/products');
|
||||
await page.waitForLoadState('domcontentloaded');
|
||||
|
||||
// Should show products listing
|
||||
const productsGrid = page.locator('[class*="product-card"]');
|
||||
const count = await productsGrid.count();
|
||||
expect(count).toBeGreaterThan(0);
|
||||
|
||||
// Navigate to non-existent route should redirect to products
|
||||
await page.goto('/non-existent-route');
|
||||
await page.waitForURL('**/products');
|
||||
|
||||
// Should be on products page
|
||||
const productsHeading = page.locator('h1:has-text("Our Products")');
|
||||
await expect(productsHeading).toBeVisible();
|
||||
});
|
||||
|
||||
test('should display loading states during navigation', async ({ page }) => {
|
||||
// Enable slow network to see loading states
|
||||
await page.route('**/*', route => {
|
||||
setTimeout(() => route.continue(), 100);
|
||||
});
|
||||
|
||||
await page.goto('/products');
|
||||
|
||||
// Click on a product
|
||||
const product = page.locator('[class*="product-card"]').first();
|
||||
await product.click();
|
||||
|
||||
// Should eventually load the product detail
|
||||
await page.waitForURL('**/products/**', { timeout: 10000 });
|
||||
|
||||
const productDetail = page.locator('[class*="product-detail"]');
|
||||
await expect(productDetail).toBeVisible({ timeout: 10000 });
|
||||
});
|
||||
});
|
||||
@@ -1,147 +0,0 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test.describe('Product Detail Page', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
// Navigate to products page first
|
||||
await page.goto('/products');
|
||||
await page.waitForLoadState('domcontentloaded');
|
||||
});
|
||||
|
||||
test('should navigate to product detail when clicking a product', async ({ page }) => {
|
||||
// Click on the first product
|
||||
const firstProduct = page.locator('[class*="product-card"]').first();
|
||||
await firstProduct.click();
|
||||
|
||||
// Wait for navigation
|
||||
await page.waitForURL('**/products/**');
|
||||
|
||||
// Verify URL changed to product detail
|
||||
expect(page.url()).toMatch(/\/products\/prod-\d+/);
|
||||
|
||||
// Verify back link is visible
|
||||
const backLink = page.locator('a:has-text("Back to Products")');
|
||||
await expect(backLink).toBeVisible();
|
||||
});
|
||||
|
||||
test('should display complete product information', async ({ page }) => {
|
||||
// Navigate directly to a product detail page
|
||||
await page.goto('/products/prod-1');
|
||||
await page.waitForLoadState('domcontentloaded');
|
||||
|
||||
// Check product name
|
||||
const productName = page.locator('h1').filter({ hasText: /Product \d+/ });
|
||||
await expect(productName).toBeVisible();
|
||||
|
||||
// Check product image
|
||||
const productImage = page.locator('[class*="product-detail"] img');
|
||||
await expect(productImage).toBeVisible();
|
||||
await expect(productImage).toHaveAttribute('alt', /Product/);
|
||||
|
||||
// Check category
|
||||
const category = page.locator('text=/Home & Garden|Electronics|Clothing|Sports|Books/');
|
||||
await expect(category.first()).toBeVisible();
|
||||
|
||||
// Check rating
|
||||
const ratingSection = page.locator('[class*="product-rating"]');
|
||||
await expect(ratingSection).toBeVisible();
|
||||
const stars = ratingSection.locator('[class*="stars"]');
|
||||
await expect(stars).toBeVisible();
|
||||
|
||||
// Check price
|
||||
const price = page.locator('text=/\\$\\d+\\.\\d{2}/').first();
|
||||
await expect(price).toBeVisible();
|
||||
|
||||
// Check description
|
||||
const descriptionHeading = page.locator('h2:has-text("Description")');
|
||||
await expect(descriptionHeading).toBeVisible();
|
||||
const description = page.locator('p').filter({ hasText: /high-quality/ });
|
||||
await expect(description).toBeVisible();
|
||||
|
||||
// Check product information section
|
||||
const productInfoHeading = page.locator('h3:has-text("Product Information")');
|
||||
await expect(productInfoHeading).toBeVisible();
|
||||
|
||||
// Check product ID
|
||||
const productId = page.locator('text=/prod-\\d+/');
|
||||
await expect(productId).toBeVisible();
|
||||
|
||||
// Check availability - target the dd element in product info section to avoid matching the badge
|
||||
const availability = page.locator('dd').filter({ hasText: /In Stock|Out of Stock/ });
|
||||
await expect(availability).toBeVisible();
|
||||
});
|
||||
|
||||
test('should show action buttons for in-stock products', async ({ page }) => {
|
||||
// Navigate to products page
|
||||
await page.goto('/products');
|
||||
|
||||
// Find an in-stock product (one without "Out of Stock" badge)
|
||||
const inStockProduct = page.locator('[class*="product-card"]').filter({ hasNot: page.locator('text="Out of Stock"') }).first();
|
||||
await inStockProduct.click();
|
||||
|
||||
// Wait for product detail page
|
||||
await page.waitForURL('**/products/**');
|
||||
|
||||
// Check for Add to Cart button
|
||||
const addToCartButton = page.locator('button:has-text("Add to Cart")');
|
||||
await expect(addToCartButton).toBeVisible();
|
||||
await expect(addToCartButton).toBeEnabled();
|
||||
|
||||
// Check for Add to Wishlist button
|
||||
const addToWishlistButton = page.locator('button:has-text("Add to Wishlist")');
|
||||
await expect(addToWishlistButton).toBeVisible();
|
||||
await expect(addToWishlistButton).toBeEnabled();
|
||||
|
||||
// Test clicking Add to Cart (should show alert)
|
||||
page.on('dialog', dialog => {
|
||||
expect(dialog.message()).toContain('Product added to cart');
|
||||
dialog.accept();
|
||||
});
|
||||
await addToCartButton.click();
|
||||
});
|
||||
|
||||
test('should show disabled button for out-of-stock products', async ({ page }) => {
|
||||
// Navigate to products page
|
||||
await page.goto('/products');
|
||||
|
||||
// Find an out-of-stock product. The dataset of 50 products marks ~20% as
|
||||
// out of stock, so at least one is always present.
|
||||
const outOfStockProduct = page.locator('[class*="product-card"]').filter({ has: page.locator('text="Out of Stock"') }).first();
|
||||
await expect(outOfStockProduct).toBeVisible();
|
||||
|
||||
await outOfStockProduct.click();
|
||||
|
||||
// Wait for product detail page
|
||||
await page.waitForURL('**/products/**');
|
||||
|
||||
// Check for out of stock badge on detail page - use more specific selector to avoid strict mode violation
|
||||
const outOfStockBadge = page.locator('.out-of-stock-badge').filter({ hasText: 'Out of Stock' });
|
||||
await expect(outOfStockBadge).toBeVisible();
|
||||
|
||||
// Check for disabled button
|
||||
const unavailableButton = page.locator('button:has-text("Currently Unavailable")');
|
||||
await expect(unavailableButton).toBeVisible();
|
||||
await expect(unavailableButton).toBeDisabled();
|
||||
|
||||
// Should not have Add to Cart or Wishlist buttons
|
||||
const addToCartButton = page.locator('button:has-text("Add to Cart")');
|
||||
await expect(addToCartButton).toBeHidden();
|
||||
});
|
||||
|
||||
test('should navigate back to products list', async ({ page }) => {
|
||||
// Navigate to a product detail page
|
||||
await page.goto('/products/prod-1');
|
||||
await page.waitForLoadState('domcontentloaded');
|
||||
|
||||
// Click the back link
|
||||
const backLink = page.locator('a:has-text("Back to Products")');
|
||||
await backLink.click();
|
||||
|
||||
// Should navigate back to products page
|
||||
await page.waitForURL('**/products');
|
||||
expect(page.url()).toContain('/products');
|
||||
|
||||
// Products grid should be visible
|
||||
const productsGrid = page.locator('[class*="product-grid"], [class*="products"]');
|
||||
await expect(productsGrid).toBeVisible();
|
||||
});
|
||||
});
|
||||
@@ -1,146 +0,0 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test.describe('Product Listing Page', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/products');
|
||||
await page.waitForLoadState('domcontentloaded');
|
||||
});
|
||||
|
||||
test('should display products grid with at least one product', async ({ page }) => {
|
||||
// Check that products are displayed
|
||||
const productCards = page.locator('[class*="product-card"]');
|
||||
const count = await productCards.count();
|
||||
expect(count).toBeGreaterThan(0);
|
||||
|
||||
// Check first product has required elements
|
||||
const firstProduct = productCards.first();
|
||||
await expect(firstProduct).toBeVisible();
|
||||
|
||||
// Check for product image
|
||||
const productImage = firstProduct.locator('img');
|
||||
await expect(productImage).toBeVisible();
|
||||
|
||||
// Check for product name (heading level 3)
|
||||
const productName = firstProduct.locator('h3');
|
||||
await expect(productName).toBeVisible();
|
||||
|
||||
// Check for price
|
||||
const productPrice = firstProduct.locator('text=/\\$\\d+\\.\\d{2}/');
|
||||
await expect(productPrice).toBeVisible();
|
||||
});
|
||||
|
||||
test('should filter products by category', async ({ page }) => {
|
||||
// Select a specific category from dropdown
|
||||
const categoryDropdown = page.locator('select');
|
||||
await categoryDropdown.selectOption('Electronics');
|
||||
|
||||
// Wait for products to load
|
||||
await page.waitForFunction(() => document.querySelectorAll('[class*="product-card"]').length > 0);
|
||||
|
||||
// Verify all visible products are from Electronics category
|
||||
const productCategories = page.locator('[class*="product-card"] p:first-of-type');
|
||||
const count = await productCategories.count();
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const category = productCategories.nth(i);
|
||||
await expect(category).toHaveText('Electronics');
|
||||
}
|
||||
});
|
||||
|
||||
test('should filter products by search term', async ({ page }) => {
|
||||
// Enter search term
|
||||
const searchInput = page.locator('input[placeholder*="Search"]');
|
||||
await searchInput.fill('Product 1');
|
||||
|
||||
// Wait for debounce and results
|
||||
await page.waitForFunction(() => document.querySelectorAll('[class*="product-card"]').length > 0);
|
||||
|
||||
// Check that filtered products contain the search term
|
||||
const productNames = page.locator('[class*="product-card"] h3');
|
||||
const count = await productNames.count();
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const name = await productNames.nth(i).textContent();
|
||||
expect(name?.toLowerCase()).toContain('product 1');
|
||||
}
|
||||
});
|
||||
|
||||
test('should filter by in-stock products only', async ({ page }) => {
|
||||
// Get initial product count
|
||||
const resultsInfo = page.locator('text=/Showing \\d+ of \\d+ products/');
|
||||
const initialText = await resultsInfo.textContent();
|
||||
|
||||
// Click the "In Stock Only" checkbox
|
||||
const inStockCheckbox = page.locator('input[type="checkbox"]');
|
||||
await inStockCheckbox.check();
|
||||
|
||||
// Wait for the results to update (the total count should change)
|
||||
await page.waitForFunction(
|
||||
(initialText) => {
|
||||
const resultsElement = document.querySelector('[class*="results-info"]');
|
||||
return resultsElement && resultsElement.textContent !== initialText;
|
||||
},
|
||||
initialText,
|
||||
{ timeout: 5000 }
|
||||
);
|
||||
|
||||
// Verify no "Out of Stock" badges are visible (web-first wait for the
|
||||
// filtered DOM to settle)
|
||||
const outOfStockBadges = page.locator('text="Out of Stock"');
|
||||
await expect(outOfStockBadges).toHaveCount(0);
|
||||
});
|
||||
|
||||
test('should handle pagination', async ({ page }) => {
|
||||
// Check that pagination controls exist
|
||||
const paginationSection = page.locator('[class*="pagination"]');
|
||||
await expect(paginationSection).toBeVisible();
|
||||
|
||||
// Check initial state - Previous should be disabled, Next should be enabled
|
||||
const prevButton = page.locator('button:has-text("Previous")');
|
||||
const nextButton = page.locator('button:has-text("Next")');
|
||||
const pageInfo = page.locator('text=/Page \\d+ of \\d+/');
|
||||
|
||||
await expect(prevButton).toBeDisabled();
|
||||
await expect(nextButton).toBeEnabled();
|
||||
await expect(pageInfo).toBeVisible();
|
||||
|
||||
// Click next button
|
||||
await nextButton.click();
|
||||
|
||||
// Wait for new products to load
|
||||
await page.waitForFunction(() => document.querySelectorAll('[class*="product-card"]').length > 0);
|
||||
|
||||
// Verify page changed
|
||||
const newPageInfo = await pageInfo.textContent();
|
||||
expect(newPageInfo).toContain('Page 2');
|
||||
|
||||
// Now Previous should be enabled
|
||||
await expect(prevButton).toBeEnabled();
|
||||
});
|
||||
|
||||
test('should show correct product count', async ({ page }) => {
|
||||
// Check the results info text
|
||||
const resultsInfo = page.locator('text=/Showing \\d+ of \\d+ products/');
|
||||
await expect(resultsInfo).toBeVisible();
|
||||
|
||||
// Get the count from the text. The visibility assertion above guarantees
|
||||
// the "Showing X of Y" text is present, so the digits are deterministic.
|
||||
const text = String(await resultsInfo.textContent());
|
||||
const numbers = Array.from(text.matchAll(/\d+/g), (m) => m[0]);
|
||||
expect(numbers).toHaveLength(2);
|
||||
|
||||
const [showingText, totalText] = numbers;
|
||||
const showing = parseInt(showingText);
|
||||
const total = parseInt(totalText);
|
||||
|
||||
// Verify we're showing reasonable numbers
|
||||
expect(showing).toBeGreaterThan(0);
|
||||
expect(showing).toBeLessThanOrEqual(12); // Default page size
|
||||
expect(total).toBeGreaterThan(0);
|
||||
|
||||
// Count actual product cards
|
||||
const productCards = page.locator('[class*="product-card"]');
|
||||
const actualCount = await productCards.count();
|
||||
expect(actualCount).toBe(showing);
|
||||
});
|
||||
});
|
||||
@@ -1,46 +0,0 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test.describe('Shop Homepage', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/');
|
||||
});
|
||||
|
||||
test('should display the main header and navigation', async ({ page }) => {
|
||||
// Check header title
|
||||
const header = page.locator('h1').first();
|
||||
await expect(header).toContainText('Nx Shop Demo');
|
||||
|
||||
// Check navigation link exists
|
||||
const productsLink = page.locator('nav a:has-text("Products")');
|
||||
await expect(productsLink).toBeVisible();
|
||||
await expect(productsLink).toHaveAttribute('href', '/products');
|
||||
});
|
||||
|
||||
test('should display footer with copyright information', async ({ page }) => {
|
||||
// Check footer content
|
||||
const footer = page.locator('footer');
|
||||
await expect(footer).toContainText('© 2025 Nx Shop Demo');
|
||||
await expect(footer).toContainText(
|
||||
'Frontend (Angular) + Backend (Express) + Shared Libraries'
|
||||
);
|
||||
});
|
||||
|
||||
test('should redirect to products page by default', async ({ page }) => {
|
||||
// The app should redirect from / to /products
|
||||
await page.waitForURL('**/products');
|
||||
expect(page.url()).toContain('/products');
|
||||
|
||||
// Verify we're on the products page
|
||||
const productsHeading = page.locator('h1:has-text("Our Products")');
|
||||
await expect(productsHeading).toBeVisible();
|
||||
});
|
||||
|
||||
test('should have proper page title and meta', async ({ page }) => {
|
||||
// Check page title
|
||||
await expect(page).toHaveTitle(/shop/i);
|
||||
|
||||
// Check viewport is responsive
|
||||
const viewport = page.viewportSize();
|
||||
expect(viewport).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -1,25 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"allowJs": true,
|
||||
"outDir": "../../dist/out-tsc",
|
||||
"sourceMap": false,
|
||||
"module": "commonjs",
|
||||
"strict": true,
|
||||
"noImplicitOverride": true,
|
||||
"noPropertyAccessFromIndexSignature": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"types": ["node"]
|
||||
},
|
||||
"include": [
|
||||
"**/*.ts",
|
||||
"**/*.js",
|
||||
"playwright.config.ts",
|
||||
"src/**/*.spec.ts",
|
||||
"src/**/*.spec.js",
|
||||
"src/**/*.test.ts",
|
||||
"src/**/*.test.js",
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
import nx from '@nx/eslint-plugin';
|
||||
import baseConfig from '../../eslint.config.mjs';
|
||||
|
||||
export default [
|
||||
...baseConfig,
|
||||
...nx.configs['flat/angular'],
|
||||
...nx.configs['flat/angular-template'],
|
||||
{
|
||||
files: ['**/*.ts'],
|
||||
rules: {
|
||||
'@angular-eslint/directive-selector': [
|
||||
'error',
|
||||
{
|
||||
type: 'attribute',
|
||||
prefix: 'app',
|
||||
style: 'camelCase',
|
||||
},
|
||||
],
|
||||
'@angular-eslint/component-selector': [
|
||||
'error',
|
||||
{
|
||||
type: 'element',
|
||||
prefix: 'app',
|
||||
style: 'kebab-case',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
files: ['**/*.html'],
|
||||
// Override or add rules here
|
||||
rules: {},
|
||||
},
|
||||
];
|
||||
@@ -1,88 +0,0 @@
|
||||
{
|
||||
"name": "shop",
|
||||
"$schema": "../../node_modules/nx/schemas/project-schema.json",
|
||||
"projectType": "application",
|
||||
"prefix": "app",
|
||||
"sourceRoot": "apps/shop/src",
|
||||
"tags": ["scope:shop"],
|
||||
"targets": {
|
||||
"build": {
|
||||
"executor": "@angular/build:application",
|
||||
"outputs": ["{options.outputPath}"],
|
||||
"options": {
|
||||
"outputPath": "dist/apps/shop",
|
||||
"browser": "apps/shop/src/main.ts",
|
||||
"polyfills": ["zone.js"],
|
||||
"tsConfig": "apps/shop/tsconfig.app.json",
|
||||
"assets": [
|
||||
{
|
||||
"glob": "**/*",
|
||||
"input": "apps/shop/public"
|
||||
}
|
||||
],
|
||||
"styles": ["apps/shop/src/styles.css"],
|
||||
"server": "apps/shop/src/main.server.ts",
|
||||
"ssr": {
|
||||
"entry": "apps/shop/src/server.ts"
|
||||
},
|
||||
"outputMode": "server"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "500kb",
|
||||
"maximumError": "1mb"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "4kb",
|
||||
"maximumError": "8kb"
|
||||
}
|
||||
],
|
||||
"outputHashing": "all"
|
||||
},
|
||||
"development": {
|
||||
"optimization": false,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"serve": {
|
||||
"dependsOn": ["api:serve"],
|
||||
"continuous": true,
|
||||
"executor": "@angular/build:dev-server",
|
||||
"configurations": {
|
||||
"production": {
|
||||
"buildTarget": "shop:build:production"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "shop:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development",
|
||||
"options": {
|
||||
"proxyConfig": "apps/shop/proxy.conf.json"
|
||||
}
|
||||
},
|
||||
"extract-i18n": {
|
||||
"executor": "@angular/build:extract-i18n",
|
||||
"options": {
|
||||
"buildTarget": "shop:build"
|
||||
}
|
||||
},
|
||||
"serve-static": {
|
||||
"continuous": true,
|
||||
"executor": "@nx/web:file-server",
|
||||
"options": {
|
||||
"buildTarget": "shop:build",
|
||||
"port": 4200,
|
||||
"staticFilePath": "dist/apps/shop/browser",
|
||||
"spa": true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"/@org/api": {
|
||||
"target": "http://localhost:3333",
|
||||
"secure": false
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
@@ -1,10 +0,0 @@
|
||||
import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
|
||||
import { provideServerRendering, withRoutes } from '@angular/ssr';
|
||||
import { appConfig } from './app.config';
|
||||
import { serverRoutes } from './app.routes.server';
|
||||
|
||||
const serverConfig: ApplicationConfig = {
|
||||
providers: [provideServerRendering(withRoutes(serverRoutes))],
|
||||
};
|
||||
|
||||
export const config = mergeApplicationConfig(appConfig, serverConfig);
|
||||
@@ -1,22 +0,0 @@
|
||||
import {
|
||||
ApplicationConfig,
|
||||
provideBrowserGlobalErrorListeners,
|
||||
provideZoneChangeDetection,
|
||||
} from '@angular/core';
|
||||
import { provideRouter } from '@angular/router';
|
||||
import { provideHttpClient, withFetch } from '@angular/common/http';
|
||||
import { appRoutes } from './app.routes';
|
||||
import {
|
||||
provideClientHydration,
|
||||
withEventReplay,
|
||||
} from '@angular/platform-browser';
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
provideClientHydration(withEventReplay()),
|
||||
provideBrowserGlobalErrorListeners(),
|
||||
provideZoneChangeDetection({ eventCoalescing: true }),
|
||||
provideRouter(appRoutes),
|
||||
provideHttpClient(withFetch()),
|
||||
],
|
||||
};
|
||||
@@ -1,66 +0,0 @@
|
||||
.app-header {
|
||||
background: #2c3e50;
|
||||
color: white;
|
||||
padding: 1rem 0;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.app-header .container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.app-header h1 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.app-header nav {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.app-header nav a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 1rem;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.app-header nav a:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.app-header nav a.active {
|
||||
background: #3498db;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
min-height: calc(100vh - 140px);
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.app-footer {
|
||||
background: #34495e;
|
||||
color: white;
|
||||
padding: 24px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.app-footer .container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.app-footer p {
|
||||
margin: 8px 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
<header class="app-header">
|
||||
<div class="container">
|
||||
<h1>{{ title }}</h1>
|
||||
<nav>
|
||||
<a routerLink="/products" routerLinkActive="active">Products</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="app-main">
|
||||
<router-outlet></router-outlet>
|
||||
</main>
|
||||
|
||||
<footer class="app-footer">
|
||||
<div class="container">
|
||||
<p>© 2025 Nx Shop Demo - Showcasing Nx Monorepo Features</p>
|
||||
<p>Frontend (Angular) + Backend (Express) + Shared Libraries</p>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -1,12 +0,0 @@
|
||||
import { RenderMode, ServerRoute } from '@angular/ssr';
|
||||
|
||||
export const serverRoutes: ServerRoute[] = [
|
||||
{
|
||||
path: 'products/:id',
|
||||
renderMode: RenderMode.Server,
|
||||
},
|
||||
{
|
||||
path: '**',
|
||||
renderMode: RenderMode.Server,
|
||||
},
|
||||
];
|
||||
@@ -1,25 +0,0 @@
|
||||
import { Route } from '@angular/router';
|
||||
|
||||
export const appRoutes: Route[] = [
|
||||
{
|
||||
path: '',
|
||||
redirectTo: 'products',
|
||||
pathMatch: 'full',
|
||||
},
|
||||
{
|
||||
path: 'products',
|
||||
loadChildren: () =>
|
||||
import('@org/shop/feature-products').then(m => m.featureProductsRoutes),
|
||||
},
|
||||
{
|
||||
path: 'products',
|
||||
loadChildren: () =>
|
||||
import('@org/shop/feature-product-detail').then(
|
||||
m => m.featureProductDetailRoutes
|
||||
),
|
||||
},
|
||||
{
|
||||
path: '**',
|
||||
redirectTo: 'products',
|
||||
},
|
||||
];
|
||||
@@ -1,58 +0,0 @@
|
||||
import { TestBed, ComponentFixture } from '@angular/core/testing';
|
||||
import { App } from './app';
|
||||
import { appRoutes } from './app.routes';
|
||||
import { provideRouter } from '@angular/router';
|
||||
import { By } from '@angular/platform-browser';
|
||||
|
||||
describe('App', () => {
|
||||
let component: App;
|
||||
let fixture: ComponentFixture<App>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [App],
|
||||
providers: [provideRouter(appRoutes)],
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(App);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create the app component', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should render title in header', () => {
|
||||
const compiled = fixture.nativeElement as HTMLElement;
|
||||
expect(compiled.querySelector('h1')?.textContent).toContain('Nx Shop Demo');
|
||||
});
|
||||
|
||||
it('should render navigation links', () => {
|
||||
const navLinks = fixture.debugElement.queryAll(By.css('nav a'));
|
||||
expect(navLinks.length).toBeGreaterThan(0);
|
||||
expect(navLinks[0].nativeElement.textContent).toContain('Products');
|
||||
expect(navLinks[0].nativeElement.getAttribute('routerLink')).toBe(
|
||||
'/products'
|
||||
);
|
||||
});
|
||||
|
||||
it('should render footer with correct copyright', () => {
|
||||
const footer = fixture.nativeElement.querySelector('.app-footer');
|
||||
expect(footer).toBeTruthy();
|
||||
expect(footer?.textContent).toContain('© 2025 Nx Shop Demo');
|
||||
expect(footer?.textContent).toContain(
|
||||
'Frontend (Angular) + Backend (Express) + Shared Libraries'
|
||||
);
|
||||
});
|
||||
|
||||
it('should have router outlet for dynamic content', () => {
|
||||
const routerOutlet = fixture.nativeElement.querySelector('router-outlet');
|
||||
expect(routerOutlet).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should apply change detection strategy OnPush', () => {
|
||||
const metadata = (App as unknown as { ɵcmp: { onPush: boolean } })['ɵcmp'];
|
||||
expect(metadata.onPush).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -1,13 +0,0 @@
|
||||
import { Component, ChangeDetectionStrategy } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
imports: [RouterModule],
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.html',
|
||||
styleUrl: './app.css',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class App {
|
||||
protected title = 'Nx Shop Demo';
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>shop</title>
|
||||
<base href="/" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,7 +0,0 @@
|
||||
import { bootstrapApplication, BootstrapContext } from '@angular/platform-browser';
|
||||
import { App } from './app/app';
|
||||
import { config } from './app/app.config.server';
|
||||
|
||||
const bootstrap = (context: BootstrapContext) => bootstrapApplication(App, config, context);
|
||||
|
||||
export default bootstrap;
|
||||
@@ -1,5 +0,0 @@
|
||||
import { bootstrapApplication } from '@angular/platform-browser';
|
||||
import { appConfig } from './app/app.config';
|
||||
import { App } from './app/app';
|
||||
|
||||
bootstrapApplication(App, appConfig).catch((err) => console.error(err));
|
||||
@@ -1,66 +0,0 @@
|
||||
import {
|
||||
AngularNodeAppEngine,
|
||||
createNodeRequestHandler,
|
||||
isMainModule,
|
||||
writeResponseToNodeResponse,
|
||||
} from '@angular/ssr/node';
|
||||
import express from 'express';
|
||||
import { dirname, resolve } from 'node:path';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
|
||||
const serverDistFolder = dirname(fileURLToPath(import.meta.url));
|
||||
const browserDistFolder = resolve(serverDistFolder, '../browser');
|
||||
|
||||
const app = express();
|
||||
const angularApp = new AngularNodeAppEngine();
|
||||
|
||||
/**
|
||||
* Example Express Rest API endpoints can be defined here.
|
||||
* Uncomment and define endpoints as necessary.
|
||||
*
|
||||
* Example:
|
||||
* ```ts
|
||||
* app.get('/api/**', (req, res) => {
|
||||
* // Handle API request
|
||||
* });
|
||||
* ```
|
||||
*/
|
||||
|
||||
/**
|
||||
* Serve static files from /browser
|
||||
*/
|
||||
app.use(
|
||||
express.static(browserDistFolder, {
|
||||
maxAge: '1y',
|
||||
index: false,
|
||||
redirect: false,
|
||||
})
|
||||
);
|
||||
|
||||
/**
|
||||
* Handle all other requests by rendering the Angular application.
|
||||
*/
|
||||
app.use('/**', (req, res, next) => {
|
||||
angularApp
|
||||
.handle(req)
|
||||
.then((response) =>
|
||||
response ? writeResponseToNodeResponse(response, res) : next()
|
||||
)
|
||||
.catch(next);
|
||||
});
|
||||
|
||||
/**
|
||||
* Start the server if this module is the main entry point.
|
||||
* The server listens on the port defined by the `PORT` environment variable, or defaults to 4000.
|
||||
*/
|
||||
if (isMainModule(import.meta.url)) {
|
||||
const port = process.env['PORT'] || 4000;
|
||||
app.listen(port, () => {
|
||||
console.log(`Node Express server listening on http://localhost:${port}`);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Request handler used by the Angular CLI (for dev-server and during build) or Firebase Cloud Functions.
|
||||
*/
|
||||
export const reqHandler = createNodeRequestHandler(app);
|
||||
@@ -1,38 +0,0 @@
|
||||
/* Global Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #3498db;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
import '@angular/compiler';
|
||||
import '@analogjs/vitest-angular/setup-zone';
|
||||
|
||||
import {
|
||||
BrowserTestingModule,
|
||||
platformBrowserTesting,
|
||||
} from '@angular/platform-browser/testing';
|
||||
import { getTestBed } from '@angular/core/testing';
|
||||
|
||||
getTestBed().initTestEnvironment(
|
||||
BrowserTestingModule,
|
||||
platformBrowserTesting()
|
||||
);
|
||||
@@ -1,25 +0,0 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../dist/out-tsc",
|
||||
"types": ["node"]
|
||||
},
|
||||
"include": ["src/**/*.ts"],
|
||||
"exclude": [
|
||||
"jest.config.ts",
|
||||
"src/test-setup.ts",
|
||||
"src/**/*.test.ts",
|
||||
"src/**/*.spec.ts",
|
||||
"vite.config.ts",
|
||||
"vite.config.mts",
|
||||
"vitest.config.ts",
|
||||
"vitest.config.mts",
|
||||
"src/**/*.test.tsx",
|
||||
"src/**/*.spec.tsx",
|
||||
"src/**/*.test.js",
|
||||
"src/**/*.spec.js",
|
||||
"src/**/*.test.jsx",
|
||||
"src/**/*.spec.jsx",
|
||||
"src/test-setup.ts"
|
||||
]
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../dist/out-tsc",
|
||||
"types": [
|
||||
"vitest/globals",
|
||||
"vitest/importMeta",
|
||||
"vite/client",
|
||||
"node",
|
||||
"vitest"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"vite.config.ts",
|
||||
"vite.config.mts",
|
||||
"vitest.config.ts",
|
||||
"vitest.config.mts",
|
||||
"src/**/*.test.ts",
|
||||
"src/**/*.spec.ts",
|
||||
"src/**/*.test.tsx",
|
||||
"src/**/*.spec.tsx",
|
||||
"src/**/*.test.js",
|
||||
"src/**/*.spec.js",
|
||||
"src/**/*.test.jsx",
|
||||
"src/**/*.spec.jsx",
|
||||
"src/**/*.d.ts"
|
||||
],
|
||||
"files": ["src/test-setup.ts"]
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
/// <reference types='vitest' />
|
||||
import { defineConfig } from 'vite';
|
||||
import angular from '@analogjs/vite-plugin-angular';
|
||||
import tsconfigPaths from 'vite-tsconfig-paths';
|
||||
import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
|
||||
|
||||
export default defineConfig(() => ({
|
||||
root: __dirname,
|
||||
cacheDir: '../../node_modules/.vite/apps/shop',
|
||||
plugins: [angular(), tsconfigPaths(), nxCopyAssetsPlugin(['*.md'])],
|
||||
// Uncomment this if you are using workers.
|
||||
// worker: {
|
||||
// plugins: [ nxViteTsPaths() ],
|
||||
// },
|
||||
test: {
|
||||
name: 'shop',
|
||||
watch: false,
|
||||
globals: true,
|
||||
environment: 'jsdom',
|
||||
include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
|
||||
setupFiles: ['src/test-setup.ts'],
|
||||
reporters: ['default'],
|
||||
coverage: {
|
||||
reportsDirectory: '../../coverage/apps/shop',
|
||||
provider: 'v8' as const,
|
||||
},
|
||||
},
|
||||
}));
|
||||
6
jest.config.ts
Normal file
6
jest.config.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import type { Config } from 'jest';
|
||||
import { getJestProjectsAsync } from '@nx/jest';
|
||||
|
||||
export default async (): Promise<Config> => ({
|
||||
projects: await getJestProjectsAsync()
|
||||
});
|
||||
3
jest.preset.js
Normal file
3
jest.preset.js
Normal file
@@ -0,0 +1,3 @@
|
||||
const nxPreset = require('@nx/jest/preset').default;
|
||||
|
||||
module.exports = { ...nxPreset };
|
||||
@@ -1,7 +1,7 @@
|
||||
# data
|
||||
# ui
|
||||
|
||||
This library was generated with [Nx](https://nx.dev).
|
||||
|
||||
## Running unit tests
|
||||
|
||||
Run `nx test data` to execute the unit tests.
|
||||
Run `nx test ui` to execute the unit tests.
|
||||
56
libs/ui/eslint.config.mjs
Normal file
56
libs/ui/eslint.config.mjs
Normal file
@@ -0,0 +1,56 @@
|
||||
import nx from "@nx/eslint-plugin";
|
||||
import baseConfig from "../../eslint.config.mjs";
|
||||
|
||||
export default [
|
||||
...nx.configs["flat/angular"],
|
||||
...nx.configs["flat/angular-template"],
|
||||
...baseConfig,
|
||||
{
|
||||
files: [
|
||||
"**/*.json"
|
||||
],
|
||||
rules: {
|
||||
"@nx/dependency-checks": [
|
||||
"error",
|
||||
{
|
||||
ignoredFiles: [
|
||||
"{projectRoot}/eslint.config.{js,cjs,mjs,ts,cts,mts}"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
languageOptions: {
|
||||
parser: await import("jsonc-eslint-parser")
|
||||
}
|
||||
},
|
||||
{
|
||||
files: [
|
||||
"**/*.ts"
|
||||
],
|
||||
rules: {
|
||||
"@angular-eslint/directive-selector": [
|
||||
"error",
|
||||
{
|
||||
type: "attribute",
|
||||
prefix: "pi",
|
||||
style: "camelCase"
|
||||
}
|
||||
],
|
||||
"@angular-eslint/component-selector": [
|
||||
"error",
|
||||
{
|
||||
type: "element",
|
||||
prefix: "pi",
|
||||
style: "kebab-case"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
files: [
|
||||
"**/*.html"
|
||||
],
|
||||
// Override or add rules here
|
||||
rules: {}
|
||||
}
|
||||
];
|
||||
21
libs/ui/jest.config.cts
Normal file
21
libs/ui/jest.config.cts
Normal file
@@ -0,0 +1,21 @@
|
||||
module.exports = {
|
||||
displayName: 'ui',
|
||||
preset: '../../jest.preset.js',
|
||||
setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
|
||||
coverageDirectory: '../../coverage/libs/ui',
|
||||
transform: {
|
||||
'^.+\\.(ts|mjs|js|html)$': [
|
||||
'jest-preset-angular',
|
||||
{
|
||||
tsconfig: '<rootDir>/tsconfig.spec.json',
|
||||
stringifyContentPathRegex: '\\.(html|svg)$',
|
||||
},
|
||||
],
|
||||
},
|
||||
transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
|
||||
snapshotSerializers: [
|
||||
'jest-preset-angular/build/serializers/no-ng-attributes',
|
||||
'jest-preset-angular/build/serializers/ng-snapshot',
|
||||
'jest-preset-angular/build/serializers/html-comment',
|
||||
]
|
||||
};
|
||||
7
libs/ui/ng-package.json
Normal file
7
libs/ui/ng-package.json
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
|
||||
"dest": "../../dist/libs/ui",
|
||||
"lib": {
|
||||
"entryFile": "src/index.ts"
|
||||
}
|
||||
}
|
||||
9
libs/ui/package.json
Normal file
9
libs/ui/package.json
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"name": "@pi/ui",
|
||||
"version": "0.0.1",
|
||||
"peerDependencies": {
|
||||
"@angular/common": "^22.0.0",
|
||||
"@angular/core": "^22.0.0"
|
||||
},
|
||||
"sideEffects": false
|
||||
}
|
||||
40
libs/ui/project.json
Normal file
40
libs/ui/project.json
Normal file
@@ -0,0 +1,40 @@
|
||||
{
|
||||
"name": "ui",
|
||||
"$schema": "../../node_modules/nx/schemas/project-schema.json",
|
||||
"sourceRoot": "libs/ui/src",
|
||||
"prefix": "pi",
|
||||
"projectType": "library",
|
||||
"tags": [],
|
||||
"targets": {
|
||||
"build": {
|
||||
"executor": "@nx/angular:ng-packagr-lite",
|
||||
"outputs": [
|
||||
"{workspaceRoot}/dist/{projectRoot}"
|
||||
],
|
||||
"defaultConfiguration": "production",
|
||||
"options": {
|
||||
"project": "libs/ui/ng-package.json",
|
||||
"tsConfig": "libs/ui/tsconfig.lib.json"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"tsConfig": "libs/ui/tsconfig.lib.prod.json"
|
||||
},
|
||||
"development": {}
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
"executor": "@nx/jest:jest",
|
||||
"outputs": [
|
||||
"{workspaceRoot}/coverage/{projectRoot}"
|
||||
],
|
||||
"options": {
|
||||
"jestConfig": "libs/ui/jest.config.cts",
|
||||
"tsConfig": "libs/ui/tsconfig.spec.json"
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"executor": "@nx/eslint:lint"
|
||||
}
|
||||
}
|
||||
}
|
||||
61
libs/ui/src/index.ts
Normal file
61
libs/ui/src/index.ts
Normal file
@@ -0,0 +1,61 @@
|
||||
// Barrel público de @pi/ui — generado durante la migración.
|
||||
|
||||
export * from './lib/styles';
|
||||
|
||||
export * from './lib/util/affix';
|
||||
export * from './lib/util/amplitude';
|
||||
export * from './lib/util/color';
|
||||
export * from './lib/util/common';
|
||||
export * from './lib/util/dato-cms';
|
||||
export * from './lib/util/device-configs';
|
||||
export * from './lib/util/environments';
|
||||
export * from './lib/util/form-control';
|
||||
export * from './lib/util/icon-registry';
|
||||
export * from './lib/util/infinite-scroll';
|
||||
// ./lib/util/list-configs: omitido(s) por colisión con otro módulo -> featureKey, getFeatureState, initialState
|
||||
export { ListConfigsFacade, ListConfigsState, ListMode, ListModeActionsType, getListMode, listConfigsReducer, resetListMode, setListMode } from './lib/util/list-configs';
|
||||
export * from './lib/util/loaders';
|
||||
export * from './lib/util/local-storage';
|
||||
export * from './lib/util/menu';
|
||||
export * from './lib/util/models';
|
||||
export * from './lib/util/pipes';
|
||||
export * from './lib/util/router-store';
|
||||
export * from './lib/util/schema';
|
||||
export * from './lib/util/scroll-to';
|
||||
export * from './lib/util/status';
|
||||
export * from './lib/util/translate';
|
||||
export * from './lib/util/validator';
|
||||
export * from './lib/util/value';
|
||||
export * from './lib/util/view-title';
|
||||
|
||||
export * from './lib/ui/accordion';
|
||||
export * from './lib/ui/banner';
|
||||
export * from './lib/ui/button';
|
||||
export * from './lib/ui/card';
|
||||
export * from './lib/ui/carousel';
|
||||
export * from './lib/ui/chart';
|
||||
export * from './lib/ui/chip';
|
||||
export * from './lib/ui/data-grid';
|
||||
export * from './lib/ui/data-table';
|
||||
export * from './lib/ui/divider';
|
||||
export * from './lib/ui/error-status-code';
|
||||
export * from './lib/ui/form-field';
|
||||
export * from './lib/ui/icon';
|
||||
export * from './lib/ui/image';
|
||||
export * from './lib/ui/list-item';
|
||||
export * from './lib/ui/modal';
|
||||
export * from './lib/ui/note';
|
||||
export * from './lib/ui/notification';
|
||||
export * from './lib/ui/paginator';
|
||||
export * from './lib/ui/panel';
|
||||
export * from './lib/ui/progress';
|
||||
export * from './lib/ui/select';
|
||||
// ./lib/ui/slide-toggle: omitido(s) por colisión con otro módulo -> PiSlideToggleComponent
|
||||
export { PiSharedUISlideToggleModule } from './lib/ui/slide-toggle';
|
||||
export * from './lib/ui/slider';
|
||||
export * from './lib/ui/spinner';
|
||||
export * from './lib/ui/tab';
|
||||
// ./lib/ui/text: omitido(s) por colisión con otro módulo -> PiDisabledDirective
|
||||
export { PiBaseTextViewerComponent, PiSharedUITextModule, PiTextAreaExpansionComponent, PiTextCenteredDirective, PiTextColorDirective, PiTextCoveredDirective, PiTextGroupDirective, PiTextGroupIndicatorDirective, PiTextLargeDirective, PiTextLetterSpacingDirective, PiTextMediumDirective, PiTextSizeDirective, PiTextSmallDirective, PiTextViewerComponent, PiTextViewerLinkComponent, PiTextWeightBlackDirective, PiTextWeightBoldDirective, PiTextWeightLightDirective, PiTextWeightMediumDirective, PiTextWeightNormalDirective, PiTextXLargeDirective, PiTextXSmallDirective, PiTextXXLargeDirective, PiTextXXSmallDirective, PiTextXXXLargeDirective } from './lib/ui/text';
|
||||
export * from './lib/ui/tooltip';
|
||||
export * from './lib/ui/wrapper';
|
||||
46
libs/ui/src/lib/styles/animations.ts
Normal file
46
libs/ui/src/lib/styles/animations.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
import { animate, state, style, transition, trigger } from '@angular/animations';
|
||||
import { DURATION } from './configs';
|
||||
|
||||
export function transitionAnimation(duration: DURATION): any {
|
||||
return [
|
||||
trigger('collapse', [
|
||||
state(
|
||||
'off',
|
||||
style({ transform: 'translateY(0%)', opacity: '0', visibility: 'hidden', height: '0' })
|
||||
),
|
||||
state(
|
||||
'on',
|
||||
style({ transform: 'translateY(0%)', opacity: '1', visibility: 'visible', height: '100%' })
|
||||
),
|
||||
transition('on <=> off', [animate('420ms ease-in-out')]),
|
||||
]),
|
||||
];
|
||||
}
|
||||
|
||||
export const enterTransition = transition(':enter', [
|
||||
style({
|
||||
opacity: 0,
|
||||
}),
|
||||
animate(
|
||||
'240ms 200ms ease-out',
|
||||
style({
|
||||
opacity: 1,
|
||||
})
|
||||
),
|
||||
]);
|
||||
|
||||
export const leaveTransition = transition(':leave', [
|
||||
style({
|
||||
opacity: 1,
|
||||
}),
|
||||
animate(
|
||||
'180ms 120ms ease-out',
|
||||
style({
|
||||
opacity: 0,
|
||||
})
|
||||
),
|
||||
]);
|
||||
|
||||
export const fadeIn = trigger('fadeIn', [enterTransition]);
|
||||
|
||||
export const fadeOut = trigger('fadeOut', [leaveTransition]);
|
||||
342
libs/ui/src/lib/styles/common/abstracts/_pi-color-variables.scss
Normal file
342
libs/ui/src/lib/styles/common/abstracts/_pi-color-variables.scss
Normal file
@@ -0,0 +1,342 @@
|
||||
// Primary
|
||||
$pi-color-theme-primary: (
|
||||
50: #f0f4ff,
|
||||
100: #d7e2fb,
|
||||
200: #c3d5ff,
|
||||
300: #a1bbf5,
|
||||
400: #8cacf2,
|
||||
500: #799ef0,
|
||||
600: #7196ee,
|
||||
700: #668cec,
|
||||
800: #5c82e9,
|
||||
900: #5772d4,
|
||||
A100: #ffffff,
|
||||
A200: #ffffff,
|
||||
A400: #d6e0ff,
|
||||
A700: #bdccff,
|
||||
contrast: (
|
||||
50: #000000,
|
||||
100: #000000,
|
||||
200: #000000,
|
||||
300: #000000,
|
||||
400: #000000,
|
||||
500: #000000,
|
||||
600: #000000,
|
||||
700: #000000,
|
||||
800: #000000,
|
||||
900: #000000,
|
||||
A100: #000000,
|
||||
A200: #000000,
|
||||
A400: #000000,
|
||||
A700: #000000,
|
||||
),
|
||||
);
|
||||
|
||||
// Accent
|
||||
$pi-color-theme-accent: (
|
||||
50: #fdf5e5,
|
||||
100: #fce0ad,
|
||||
200: #f6d393,
|
||||
300: #f6bc63,
|
||||
400: #f0b54a,
|
||||
500: #eda82a,
|
||||
600: #eba025,
|
||||
700: #d78f0f,
|
||||
800: #e58d19,
|
||||
900: #e07d0f,
|
||||
A100: #ffffff,
|
||||
A200: #ffecda,
|
||||
A400: #ffd2a7,
|
||||
A700: #ffc48d,
|
||||
contrast: (
|
||||
50: #000000,
|
||||
100: #000000,
|
||||
200: #000000,
|
||||
300: #000000,
|
||||
400: #000000,
|
||||
500: #000000,
|
||||
600: #000000,
|
||||
700: #000000,
|
||||
800: #000000,
|
||||
900: #000000,
|
||||
A100: #000000,
|
||||
A200: #000000,
|
||||
A400: #000000,
|
||||
A700: #000000,
|
||||
),
|
||||
);
|
||||
|
||||
// Warn
|
||||
$pi-color-theme-warn: (
|
||||
50: #fbe1e1,
|
||||
100: #f4b3b3,
|
||||
200: #ef8c8c,
|
||||
300: #e54e4e,
|
||||
400: #e02828,
|
||||
500: #da0202,
|
||||
600: #d60202,
|
||||
700: #d00101,
|
||||
800: #cb0101,
|
||||
900: #ba1a1a,
|
||||
A100: #ffebeb,
|
||||
A200: #ffb8b8,
|
||||
A400: #ff8585,
|
||||
A700: #ff6b6b,
|
||||
contrast: (
|
||||
50: #000000,
|
||||
100: #000000,
|
||||
200: #000000,
|
||||
300: #ffffff,
|
||||
400: #ffffff,
|
||||
500: #ffffff,
|
||||
600: #ffffff,
|
||||
700: #ffffff,
|
||||
800: #ffffff,
|
||||
900: #ffffff,
|
||||
A100: #000000,
|
||||
A200: #000000,
|
||||
A400: #000000,
|
||||
A700: #000000,
|
||||
),
|
||||
);
|
||||
// Highlighted
|
||||
$pi-color-theme-highlighted: (
|
||||
50: #e2e5ed,
|
||||
100: #b6bfd3,
|
||||
200: #8695b5,
|
||||
300: #566a97,
|
||||
400: #314a81,
|
||||
500: #0d2a6b,
|
||||
600: #0b2563,
|
||||
700: #091f58,
|
||||
800: #07194e,
|
||||
900: #030f3c,
|
||||
A100: #7285ff,
|
||||
A200: #3f59ff,
|
||||
A400: #0c2dff,
|
||||
A700: #0021f1,
|
||||
contrast: (
|
||||
50: #000000,
|
||||
100: #000000,
|
||||
200: #000000,
|
||||
300: #ffffff,
|
||||
400: #ffffff,
|
||||
500: #ffffff,
|
||||
600: #ffffff,
|
||||
700: #ffffff,
|
||||
800: #ffffff,
|
||||
900: #ffffff,
|
||||
A100: #000000,
|
||||
A200: #ffffff,
|
||||
A400: #ffffff,
|
||||
A700: #ffffff,
|
||||
),
|
||||
);
|
||||
|
||||
$md-mcgpalette0: (
|
||||
50: #e1e8f5,
|
||||
100: #b5c6e6,
|
||||
200: #83a1d5,
|
||||
300: #517bc4,
|
||||
400: #2c5eb7,
|
||||
500: #0d2a6b,
|
||||
600: #0b2563,
|
||||
700: #091f58,
|
||||
800: #07194e,
|
||||
900: #030f3c,
|
||||
A100: #7285ff,
|
||||
A200: #3f59ff,
|
||||
A400: #0c2dff,
|
||||
A700: #0021f1,
|
||||
contrast: (
|
||||
50: #000000,
|
||||
100: #000000,
|
||||
200: #000000,
|
||||
300: #ffffff,
|
||||
400: #ffffff,
|
||||
500: #ffffff,
|
||||
600: #ffffff,
|
||||
700: #ffffff,
|
||||
800: #ffffff,
|
||||
900: #ffffff,
|
||||
A100: #000000,
|
||||
A200: #ffffff,
|
||||
A400: #ffffff,
|
||||
A700: #ffffff,
|
||||
),
|
||||
);
|
||||
|
||||
$pi-color-primary-10: rgba(253, 253, 255, 1); // #fdfdff
|
||||
$pi-color-primary-25: rgba(250, 251, 255, 1); // #fafbff
|
||||
$pi-color-primary-50: rgba(240, 244, 255, 1); // #f0f4ff
|
||||
$pi-color-primary-75: rgba(234, 239, 255, 1); // #eaefff
|
||||
$pi-color-primary-100: rgba(215, 226, 251, 1); // #d7e2fb
|
||||
$pi-color-primary-200-rgba: rgba(196, 213, 255, 0.15); //#c4d5ff
|
||||
$pi-color-primary-200: rgba(195, 213, 255, 1); //#c3d5ff
|
||||
$pi-color-primary-300: rgba(163, 192, 255, 1); //#A3C0FF
|
||||
$pi-color-primary-400: rgba(140, 172, 242, 1); //#8CACF2
|
||||
$pi-color-primary: rgba(121, 158, 240, 1); // #799ef0
|
||||
$pi-color-primary-900: rgba(87, 114, 212, 1); // #5772D4
|
||||
// Accent
|
||||
$pi-color-accent-10: rgba(255, 253, 249, 1); // #fffdf9
|
||||
$pi-color-accent-25: rgba(255, 250, 237, 1); // #fffaed
|
||||
$pi-color-accent-50: rgba(253, 245, 229, 1); // #fdf5e5
|
||||
$pi-color-accent-75: rgba(250, 229, 191, 1); // #fae5bf
|
||||
$pi-color-accent-100: rgba(252, 224, 173, 1); // #fce0ad
|
||||
$pi-color-accent-200-rgba: rgba(252, 224, 173, 0.15); // #FCE0AD
|
||||
$pi-color-accent-200: rgba(246, 212, 149, 1); // #f6d495
|
||||
$pi-color-accent-300: rgba(242, 194, 106, 1); // #f2c26a
|
||||
$pi-color-accent-400: rgba(246, 188, 99, 1); // #f6bc63
|
||||
$pi-color-accent: rgba(237, 168, 42, 1); // #eda82a
|
||||
$pi-color-accent-900: rgba(215, 143, 15, 1); // #d78f0f
|
||||
// Highlighted
|
||||
$pi-color-highlighted-10: rgba(249, 251, 255, 1); // #f9fbff
|
||||
$pi-color-highlighted-25: rgba(242, 245, 255, 1); // #f2f5ff
|
||||
$pi-color-highlighted-50: rgba(233, 238, 255, 1); // #E9EEFF
|
||||
$pi-color-highlighted-75: rgba(218, 226, 255, 1); // #dae2ff
|
||||
$pi-color-highlighted-100: rgba(188, 205, 250, 1); // #bccdfa
|
||||
$pi-color-highlighted-200: rgba(100, 130, 215, 1); // #6482d7
|
||||
$pi-color-highlighted-200-rgba: rgba(168, 193, 255, 0.15); // #A8C1FF
|
||||
$pi-color-highlighted-300: rgba(67, 106, 193, 1); // #436ac1
|
||||
$pi-color-highlighted-400: rgba(29, 63, 138, 1); // #1d3f8a
|
||||
$pi-color-highlighted: rgba(13, 42, 107, 1); // #0d2a6b
|
||||
$pi-color-highlighted-900: rgba(3, 15, 60, 1); // #030f3c
|
||||
// Warn
|
||||
$pi-color-warn-10: rgba(255, 249, 250, 1); // #fff9fa
|
||||
$pi-color-warn-25: rgba(255, 237, 240, 1); // #ffedf0
|
||||
$pi-color-warn-50: rgba(252, 235, 235, 1); // #fcebeb
|
||||
$pi-color-warn-75: rgba(255, 231, 234, 1); // #ffe7ea
|
||||
$pi-color-warn-100: rgba(247, 205, 205, 1); // #f7cdcd
|
||||
$pi-color-warn-200: rgba(242, 172, 172, 1); // #f2acac
|
||||
$pi-color-warn-200-rgba: rgba(237, 129, 129, 0.149); // #ED8181 #ed818126
|
||||
$pi-color-warn-300: rgba(236, 139, 139, 1); // #ec8b8b
|
||||
$pi-color-warn-400: rgba(232, 114, 114, 1); // #e87272
|
||||
$pi-color-warn: rgba(228, 89, 89, 1); // #e45959
|
||||
$pi-color-warn-900: rgba(193, 55, 55, 1); // #c13737
|
||||
// Success
|
||||
$pi-color-success-10: rgba(247, 252, 249, 1); // #f7fcf9
|
||||
$pi-color-success-25: rgba(230, 246, 237, 1); // #e6f6ed
|
||||
$pi-color-success-50: rgba(222, 245, 232, 1); // #DEF5E8
|
||||
$pi-color-success-75: rgba(199, 235, 220, 1); // #c7ebdc
|
||||
$pi-color-success-100: rgba(187, 232, 213, 1); // #bbe8d5
|
||||
$pi-color-success-200: rgba(131, 219, 182, 1); // #83dbb6
|
||||
$pi-color-success-300: rgba(96, 201, 157, 1); // #60c99d
|
||||
$pi-color-success-400: rgba(62, 190, 136, 1); // #3ebe88
|
||||
$pi-color-success: rgba(28, 178, 115, 1); // #1cb273
|
||||
$pi-color-success-900: rgba(0, 151, 88, 1); // #009758
|
||||
// Grey
|
||||
$pi-color-grey-10: rgba(252, 252, 253, 1); // #fcfcfd
|
||||
$pi-color-grey-25: rgba(250, 250, 251, 1); // #fafafb
|
||||
$pi-color-grey-50: rgba(243, 244, 244, 1); // #f3f4f4
|
||||
$pi-color-grey-75: rgba(240, 241, 243, 1); // #f0f1f3
|
||||
$pi-color-grey-100: rgba(233, 235, 241, 1); // #e9ebf1
|
||||
$pi-color-grey-200: rgba(209, 211, 218, 1); // #d1d3da
|
||||
$pi-color-grey-300: rgba(178, 178, 184, 1); // #b2b2b8
|
||||
$pi-color-grey-400: rgba(137, 136, 143, 1); // #89888f
|
||||
$pi-color-grey: rgba(106, 106, 112, 1); // #6a6a70
|
||||
$pi-color-grey-900: rgba(61, 61, 61, 1); // #3d3d3d
|
||||
// White
|
||||
$pi-color-white: rgba(255, 255, 255, 1); // #FFFFFF
|
||||
$pi-color-white-900: rgba(244, 244, 244, 1); // #f4f4f4
|
||||
$pi-color-white-rgba-03: rgba(255, 255, 255, 0.33); // #ffffff rgba
|
||||
$pi-color-white-rgba-05: rgba(255, 255, 255, 0.5); // #ffffff rgba
|
||||
$pi-color-white-rgba-06: rgba(255, 255, 255, 0.66); // #ffffff rgba
|
||||
$pi-color-white-rgba-09: rgba(255, 255, 255, 0.88); // #ffffff rgba
|
||||
// Black
|
||||
$pi-color-black-200: rgba(50, 55, 72, 1); // #323748
|
||||
$pi-color-black: rgba(26, 26, 26, 1); // #1A1A1A
|
||||
// Background
|
||||
$pi-color-background-300: rgba(174, 174, 182, 1); // #F4F4F4
|
||||
$pi-color-background-400: rgba(252, 252, 252, 1); // ##FCFCFC
|
||||
$pi-color-background-500: rgba(247, 247, 247, 1); //#f7f7f7
|
||||
|
||||
// Root variables
|
||||
:root {
|
||||
// Brand colors
|
||||
// Primary
|
||||
--pi-color-primary-10: #{$pi-color-primary-10};
|
||||
--pi-color-primary-25: #{$pi-color-primary-25};
|
||||
--pi-color-primary-50: #{$pi-color-primary-50};
|
||||
--pi-color-primary-75: #{$pi-color-primary-75};
|
||||
--pi-color-primary-100: #{$pi-color-primary-100};
|
||||
--pi-color-primary-200: #{$pi-color-primary-200};
|
||||
--pi-color-primary-200-rgba: #{$pi-color-primary-200-rgba};
|
||||
--pi-color-primary-300: #{$pi-color-primary-300};
|
||||
--pi-color-primary-400: #{$pi-color-primary-400};
|
||||
--pi-color-primary: #{$pi-color-primary};
|
||||
--pi-color-primary-900: #{$pi-color-primary-900};
|
||||
// Accent
|
||||
--pi-color-accent-10: #{$pi-color-accent-10};
|
||||
--pi-color-accent-25: #{$pi-color-accent-25};
|
||||
--pi-color-accent-50: #{$pi-color-accent-50};
|
||||
--pi-color-accent-75: #{$pi-color-accent-75};
|
||||
--pi-color-accent-100: #{$pi-color-accent-100};
|
||||
--pi-color-accent-200: #{$pi-color-accent-200};
|
||||
--pi-color-accent-200-rgba: #{$pi-color-accent-200-rgba};
|
||||
--pi-color-accent-300: #{$pi-color-accent-300};
|
||||
--pi-color-accent-400: #{$pi-color-accent-400};
|
||||
--pi-color-accent: #{$pi-color-accent};
|
||||
--pi-color-accent-900: #{$pi-color-accent-900};
|
||||
// Warn
|
||||
--pi-color-highlighted-10: #{$pi-color-highlighted-10};
|
||||
--pi-color-highlighted-25: #{$pi-color-highlighted-25};
|
||||
--pi-color-highlighted-50: #{$pi-color-highlighted-50};
|
||||
--pi-color-highlighted-75: #{$pi-color-highlighted-75};
|
||||
--pi-color-highlighted-100: #{$pi-color-highlighted-100};
|
||||
--pi-color-highlighted-200: #{$pi-color-highlighted-200};
|
||||
--pi-color-highlighted-200-rgba: #{$pi-color-highlighted-200-rgba};
|
||||
--pi-color-highlighted-300: #{$pi-color-highlighted-300};
|
||||
--pi-color-highlighted-400: #{$pi-color-highlighted-400};
|
||||
--pi-color-highlighted: #{$pi-color-highlighted};
|
||||
--pi-color-highlighted-900: #{$pi-color-highlighted-900};
|
||||
// Warn
|
||||
--pi-color-warn-10: #{$pi-color-warn-10};
|
||||
--pi-color-warn-25: #{$pi-color-warn-25};
|
||||
--pi-color-warn-50: #{$pi-color-warn-50};
|
||||
--pi-color-warn-75: #{$pi-color-warn-75};
|
||||
--pi-color-warn-100: #{$pi-color-warn-100};
|
||||
--pi-color-warn-200: #{$pi-color-warn-200};
|
||||
--pi-color-warn-200-rgba: #{$pi-color-warn-200-rgba};
|
||||
--pi-color-warn-300: #{$pi-color-warn-300};
|
||||
--pi-color-warn-400: #{$pi-color-warn-400};
|
||||
--pi-color-warn: #{$pi-color-warn};
|
||||
--pi-color-warn-900: #{$pi-color-warn-900};
|
||||
// Success
|
||||
--pi-color-success-10: #{$pi-color-success-10};
|
||||
--pi-color-success-25: #{$pi-color-success-25};
|
||||
--pi-color-success-50: #{$pi-color-success-50};
|
||||
--pi-color-success-75: #{$pi-color-success-75};
|
||||
--pi-color-success-100: #{$pi-color-success-100};
|
||||
--pi-color-success-200: #{$pi-color-success-200};
|
||||
--pi-color-success-300: #{$pi-color-success-300};
|
||||
--pi-color-success-400: #{$pi-color-success-400};
|
||||
--pi-color-success: #{$pi-color-success};
|
||||
--pi-color-success-900: #{$pi-color-success-900};
|
||||
// White
|
||||
--pi-color-white: #{$pi-color-white};
|
||||
--pi-color-white-900: #{$pi-color-white-900};
|
||||
--pi-color-white-rgba-03: #{$pi-color-white-rgba-03};
|
||||
--pi-color-white-rgba-05: #{$pi-color-white-rgba-05};
|
||||
--pi-color-white-rgba-06: #{$pi-color-white-rgba-06};
|
||||
--pi-color-white-rgba-09: #{$pi-color-white-rgba-09};
|
||||
// Grey
|
||||
--pi-color-grey-10: #{$pi-color-grey-10};
|
||||
--pi-color-grey-25: #{$pi-color-grey-25};
|
||||
--pi-color-grey-50: #{$pi-color-grey-50};
|
||||
--pi-color-grey-75: #{$pi-color-grey-75};
|
||||
--pi-color-grey-100: #{$pi-color-grey-100};
|
||||
--pi-color-grey-200: #{$pi-color-grey-200};
|
||||
--pi-color-grey-200: #{$pi-color-grey-200};
|
||||
--pi-color-grey-300: #{$pi-color-grey-300};
|
||||
--pi-color-grey-400: #{$pi-color-grey-400};
|
||||
--pi-color-grey: #{$pi-color-grey};
|
||||
--pi-color-grey-900: #{$pi-color-grey-900};
|
||||
// Black
|
||||
--pi-color-black-200: #{$pi-color-black-200};
|
||||
--pi-color-black: #{$pi-color-black};
|
||||
// Background
|
||||
--pi-color-white: #{$pi-color-white};
|
||||
--pi-color-background-300: #{$pi-color-background-300};
|
||||
--pi-color-background-400: #{$pi-color-background-400};
|
||||
--pi-color-background-400: #{$pi-color-background-400};
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
// Font sizes variables
|
||||
$pi-font-size-xxx-large: 2.875rem; // 46px
|
||||
$pi-font-size-xx-large: 2.375rem; // 38px
|
||||
$pi-font-size-x-large: 1.6875rem; // 27px
|
||||
$pi-font-size-large: 1.375rem; // 22px
|
||||
$pi-font-size-medium: 1.125rem; // 18px
|
||||
$pi-font-size-small: 0.9375rem; // 15px
|
||||
$pi-font-size-x-small: 0.75rem; // 12px
|
||||
$pi-font-size-xx-small: 0.625rem; // 10px
|
||||
$pi-font-size-xxx-small: 0.5rem; // 8px
|
||||
|
||||
// Root variables
|
||||
:root {
|
||||
// Font sizes
|
||||
--pi-font-size-xxx-large: #{$pi-font-size-xxx-large}; // 46px
|
||||
--pi-font-size-xx-large: #{$pi-font-size-xx-large}; // 38px
|
||||
--pi-font-size-x-large: #{$pi-font-size-x-large}; // 27x
|
||||
--pi-font-size-large: #{$pi-font-size-large}; // 22px
|
||||
--pi-font-size-medium: #{$pi-font-size-medium}; // 18px
|
||||
--pi-font-size-small: #{$pi-font-size-small}; // 15px
|
||||
--pi-font-size-x-small: #{$pi-font-size-x-small}; // 12px
|
||||
--pi-font-size-xx-small: #{$pi-font-size-xx-small}; // 10px
|
||||
--pi-font-size-xxx-small: #{$pi-font-size-xxx-small}; // 8px
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
// Spacings
|
||||
$pi-spacing-xxxx-large: 3rem; // 48px
|
||||
$pi-spacing-xxx-large: 2.5rem; // 40px
|
||||
$pi-spacing-xx-large: 2rem; // 32px
|
||||
$pi-spacing-x-large: 1.5rem; // 24px
|
||||
$pi-spacing-large: 1.25rem; // 20px
|
||||
$pi-spacing-medium: 1rem; // 16px
|
||||
$pi-spacing-small: 0.75rem; // 12px
|
||||
$pi-spacing-x-small: 0.625rem; // 10px
|
||||
$pi-spacing-xx-small: 0.5rem; // 8px
|
||||
$pi-spacing-xxx-small: 0.25rem; // 4px
|
||||
$pi-spacing-xxxx-small: 0.125rem; // 2px
|
||||
$pi-spacing-xxxxx-small: 0.0625rem; // 1px
|
||||
// Global sizes
|
||||
$pi-height-layout-header: 4rem; // 64px
|
||||
$pi-height-header: 5rem; // 80px
|
||||
$pi-height-header-tablet: 5.25rem; // 84px
|
||||
$pi-height-header-mobile: 5rem; // 80px
|
||||
$pi-height-footer: 4.75rem; // 76px
|
||||
$pi-height-action-bar: 8rem; // 128px
|
||||
$pi-height-header-aside: 4.75rem; // 76px
|
||||
$pi-height-footer-aside: 6.75rem; // 108px
|
||||
$pi-height-button-large: 3rem; // 48px
|
||||
$pi-size-menu-item-expanded: 3.75rem; // 60px
|
||||
$pi-size-menu-item-collapsed: 4.75rem; // 76px
|
||||
$pi-width-container-l: 75%;
|
||||
$pi-width-container: 62rem; // 992px
|
||||
$pi-width-container-s: 57.5rem; // 920px
|
||||
$pi-width-navbar-collapsed: 7.4375rem; // 119px
|
||||
$pi-width-navbar-expanded: 16rem; // 256px
|
||||
$pi-width-children-menu-expanded: 17rem; // 272px
|
||||
$pi-width-aside: 22.125rem; // 354px;
|
||||
// Cards
|
||||
$pi-height-card: 22rem; // 352px
|
||||
$pi-height-card-s: 19.375rem; // 310px
|
||||
$pi-width-card-xs: 17.125rem; // 274px
|
||||
$pi-width-card-s: 18.25rem; // 292px
|
||||
$pi-width-card: 21.5rem; // 344px
|
||||
// Radius
|
||||
$pi-border-radius-xx-small: 0.125rem; // 2px
|
||||
$pi-border-radius-x-small: 0.3125rem; // 5px
|
||||
$pi-border-radius-small: 0.625rem; // 10px
|
||||
$pi-border-radius-medium: 1rem; // 16px
|
||||
$pi-border-radius-large: 1.375rem; // 22px
|
||||
$pi-border-radius-x-large: 1.375rem; // 22px
|
||||
// Box shadow
|
||||
$pi-box-shadow: rgba(#c5c5ce, 0.1) 3px 6px 6px 0px;
|
||||
$pi-box-shadow-hover: rgba(#c3d5ff, 0.14) 2px 2px 5px 0px;
|
||||
$pi-box-shadow-double: rgba(197, 197, 206, 0.1) 3px 6px 6px 0px,
|
||||
-1px 4px 16px 2px rgba(197, 197, 206, 0.05);
|
||||
$pi-box-shadow-panel-double: 7px 7px 12px 0px rgba(#c5c5ce, 0.12),
|
||||
-7px 7px 12 0px rgba(#c5c5ce, 0.06);
|
||||
$pi-box-shadow-top: 0px -5px 5px 0px rgba(121, 158, 240, 0.02);
|
||||
$pi-box-shadow-panel: 7px 7px 12px 0px rgba(#c5c5ce, 0.08);
|
||||
$pi-box-shadow-panel-disabled: 7px 7px 12px 0px rgba(#c5c5ce, 0.04);
|
||||
$pi-box-shadow-inset: 0 0 42px -5px rgba(#c3d5ff, 0.2) inset;
|
||||
// Animation
|
||||
$pi-animation: all 0.25s ease-out;
|
||||
$pi-animation-fast: all 0.16s ease-out;
|
||||
$pi-animation-slow: all 0.4s ease-out;
|
||||
|
||||
// Root variables
|
||||
:root {
|
||||
// Spacings
|
||||
--pi-spacing-xxxx-large: #{$pi-spacing-xxxx-large}; // 3rem; // 48px
|
||||
--pi-spacing-xxx-large: #{$pi-spacing-xxx-large}; // 2.5rem; // 40px
|
||||
--pi-spacing-xx-large: #{$pi-spacing-xx-large}; // 2rem; // 32px
|
||||
--pi-spacing-x-large: #{$pi-spacing-x-large}; // 1.5rem; // 24px
|
||||
--pi-spacing-large: #{$pi-spacing-large}; // 1.25rem; // 20px
|
||||
--pi-spacing-medium: #{$pi-spacing-medium}; // 1rem; // 16px
|
||||
--pi-spacing-small: #{$pi-spacing-small}; // 0.75rem; // 12px
|
||||
--pi-spacing-x-small: #{$pi-spacing-x-small}; // 0.625rem; // 10px
|
||||
--pi-spacing-xx-small: #{$pi-spacing-xx-small}; // 0.5rem; // 8px
|
||||
--pi-spacing-xxx-small: #{$pi-spacing-xxx-small}; // 0.25rem; // 4px
|
||||
--pi-spacing-xxxx-small: #{$pi-spacing-xxxx-small}; // 0.125rem; // 2px
|
||||
--pi-spacing-xxxxx-small: #{$pi-spacing-xxxxx-small}; // 0.0625rem // 1px
|
||||
// Global Sizes
|
||||
--pi-height-layout-header: #{$pi-height-layout-header}; // 4rem; // 64px
|
||||
--pi-height-header: #{$pi-height-header}; // 5rem; // 80px
|
||||
--pi-height-header-tablet: #{$pi-height-header-tablet}; // 3.75rem;// 60px
|
||||
--pi-height-header-mobile: #{$pi-height-header-mobile}; // 3.5rem;// 56px
|
||||
--pi-height-footer: #{$pi-height-footer}; // 4.75rem; // 76px
|
||||
--pi-height-header-aside: #{$pi-height-header-aside}; // 4.75rem; // 76px
|
||||
--pi-height-footer-aside: #{$pi-height-footer-aside}; // 6.75rem; // 108px
|
||||
--pi-height-button-large: #{$pi-height-button-large}; // 3rem // 48px
|
||||
--pi-size-menu-item-expanded: #{$pi-size-menu-item-expanded}; // 3.75rem; // 60px
|
||||
--pi-size-menu-item-collapsed: #{$pi-size-menu-item-collapsed}; // 4.75rem; // 76px
|
||||
--pi-width-container-l: #{$pi-width-container-l}; // 71.25rem; // 1140px
|
||||
--pi-width-container: #{$pi-width-container}; // 62rem; // 992px
|
||||
--pi-width-container-s: #{$pi-width-container-s}; // 57.5rem; // 920px
|
||||
--pi-width-navbar-collapsed: #{$pi-width-navbar-collapsed}; // 7.4375rem; // 119px
|
||||
--pi-width-navbar-expanded: #{$pi-width-navbar-expanded}; // 16rem; // 256px
|
||||
--pi-width-children-menu-expanded: #{$pi-width-children-menu-expanded}; // 21.25rem // 340px
|
||||
--pi-width-aside: #{$pi-width-aside}; // 22.125rem; // 354px;
|
||||
// Cards
|
||||
--pi-height-card: #{$pi-height-card}; // 22rem; // 352px
|
||||
--pi-height-card-s: #{$pi-height-card-s}; // 19.375rem // 310px
|
||||
--pi-width-card-xs: #{$pi-width-card-s}; // 17.125rem // 274px
|
||||
--pi-width-card-s: #{$pi-width-card-xs}; // 18.25rem // 2274px
|
||||
--pi-width-card: #{$pi-width-card}; // 21.5rem // 344px
|
||||
// Radius
|
||||
--pi-border-radius-xx-small: #{$pi-border-radius-xx-small}; // 2px; // 0.125rem
|
||||
--pi-border-radius-x-small: #{$pi-border-radius-x-small}; // 6px; // .375rem;
|
||||
--pi-border-radius-small: #{$pi-border-radius-small}; // 10px; // 3.125rem
|
||||
--pi-border-radius-medium: #{$pi-border-radius-medium}; // 0.875rem; // 14px
|
||||
--pi-border-radius-large: #{$pi-border-radius-large}; // 1.25rem; // 20px
|
||||
// Box shadow
|
||||
--pi-box-shadow: #{$pi-box-shadow}; // rgba(#030f3c, 0.03) 3px 6px 6px 0px;
|
||||
--pi-box-shadow-hover: #{$pi-box-shadow-hover}; //rgba(#030f3c, 0.06) 2px 2px 4px 0px;
|
||||
--pi-box-shadow-double: #{$pi-box-shadow-double}; // rgba(197, 197, 206, 0.1) 3px 6px 6px 0px, -1px 4px 16px 2px rgba(197, 197, 206, 0.05);
|
||||
--pi-box-shadow-panel-double: #{$pi-box-shadow-panel-double}; // 10px 10px 16px 0px rgba(#030f3c, 0.02),
|
||||
// -10px 10px 16px 0px rgba(#030f3c, 0.02);
|
||||
--pi-box-shadow-panel: #{$pi-box-shadow-panel}; // 10px 10px 16px 0px rgba(#030f3c, 0.08);
|
||||
--pi-box-shadow-top: #{$pi-box-shadow-top}; // 0px -5px 5px 0px rgba(121, 158, 240, 0.02);
|
||||
--pi-box-shadow-inset: #{$pi-box-shadow-inset}; // 0 0 42px -5px rgba(#c3d5ff, 0.14) inset;
|
||||
// Animation
|
||||
--pi-animation: #{$pi-animation}; // all 0.25s ease;
|
||||
--pi-animation-fast: #{$pi-animation-fast}; // all 0.16s ease;
|
||||
--pi-animation-slow: #{$pi-animation-slow}; // all 0.4s ease;
|
||||
}
|
||||
@@ -0,0 +1,240 @@
|
||||
// Gradients
|
||||
// Primary
|
||||
// Primary light
|
||||
$pi-gradient-primary-light: linear-gradient(
|
||||
36.98deg,
|
||||
var(--pi-color-primary-75) 0.75%,
|
||||
var(--pi-color-primary-25) 99.2%
|
||||
);
|
||||
|
||||
$pi-gradient-primary-light-rgba: linear-gradient(
|
||||
131deg,
|
||||
rgba(215, 226, 251, 0.33) 0%,
|
||||
rgba(240, 244, 255, 0.125) 100%
|
||||
);
|
||||
|
||||
$pi-gradient-primary-light-rgba-hover: linear-gradient(
|
||||
131deg,
|
||||
rgba(215, 226, 251, 0.66) 0%,
|
||||
rgba(240, 244, 255, 0.33) 100%
|
||||
);
|
||||
|
||||
// Primary dark
|
||||
$pi-gradient-primary-dark: linear-gradient(
|
||||
36.98deg,
|
||||
var(--pi-color-primary-900) 0.75%,
|
||||
var(--pi-color-primary-400) 99.2%
|
||||
);
|
||||
|
||||
$pi-gradient-primary-dark-rgba: linear-gradient(
|
||||
131deg,
|
||||
rgba(121, 158, 240, 0.32) 0%,
|
||||
rgba(0, 0, 0, 0.125) 100%
|
||||
);
|
||||
|
||||
$pi-gradient-primary-dark-rgba-hover: linear-gradient(
|
||||
131deg,
|
||||
rgba(121, 158, 240, 0.42) 0%,
|
||||
rgba(0, 0, 0, 0.25) 100%
|
||||
);
|
||||
|
||||
$pi-gradient-primary-dark-disabled: linear-gradient(
|
||||
36.98deg,
|
||||
var(--pi-color-primary-900) 0.75%,
|
||||
var(--pi-color-primary-400) 99.2%
|
||||
);
|
||||
|
||||
// Accent
|
||||
// Accent light
|
||||
$pi-gradient-accent-light: linear-gradient(
|
||||
36.98deg,
|
||||
var(--pi-color-accent-75) 0.75%,
|
||||
var(--pi-color-accent-25) 99.2%
|
||||
);
|
||||
|
||||
$pi-gradient-accent-light-rgba: linear-gradient(
|
||||
131deg,
|
||||
rgba(253, 235, 202, 0.61) 0%,
|
||||
rgba(253, 245, 229, 0.125) 100%
|
||||
);
|
||||
|
||||
$pi-gradient-accent-light-rgba-hover: linear-gradient(
|
||||
131deg,
|
||||
rgba(253, 235, 202, 0.81) 0%,
|
||||
rgba(253, 245, 229, 0.25) 100%
|
||||
);
|
||||
|
||||
// Accent dark
|
||||
$pi-gradient-accent-dark: linear-gradient(
|
||||
36.98deg,
|
||||
var(--pi-color-accent-900) 0.75%,
|
||||
var(--pi-color-accent-400) 99.2%
|
||||
);
|
||||
$pi-gradient-accent-dark-rgba: linear-gradient(
|
||||
131deg,
|
||||
rgba(253, 235, 202, 0.61) 0%,
|
||||
rgba(0, 0, 0, 0.125) 100%
|
||||
);
|
||||
|
||||
$pi-gradient-accent-dark-rgba-hover: linear-gradient(
|
||||
131deg,
|
||||
rgba(253, 235, 202, 0.81) 0%,
|
||||
rgba(0, 0, 0, 0.25) 100%
|
||||
);
|
||||
|
||||
// Highlighted
|
||||
// Highlighted light
|
||||
$pi-gradient-highlighted-light: linear-gradient(
|
||||
36.98deg,
|
||||
var(--pi-color-highlighted-75) 0.75%,
|
||||
var(--pi-color-highlighted-25) 99.2%
|
||||
);
|
||||
$pi-gradient-highlighted-light-rgba: linear-gradient(
|
||||
131deg,
|
||||
rgba(100, 130, 215, 0.24) 0%,
|
||||
rgba(255, 255, 255, 0.125) 100%
|
||||
);
|
||||
$pi-gradient-highlighted-light-rgba-hover: linear-gradient(
|
||||
131deg,
|
||||
rgba(100, 130, 215, 0.44) 0%,
|
||||
rgba(255, 255, 255, 0.25) 100%
|
||||
);
|
||||
|
||||
// Highlighted dark
|
||||
$pi-gradient-highlighted-dark: linear-gradient(
|
||||
36.98deg,
|
||||
var(--pi-color-highlighted-900) 0.89%,
|
||||
var(--pi-color-highlighted) 99.2%
|
||||
);
|
||||
$pi-gradient-highlighted-dark-rgba: linear-gradient(
|
||||
131deg,
|
||||
rgba(100, 130, 215, 0.24) 0%,
|
||||
rgba(0, 0, 0, 0.125) 100%
|
||||
);
|
||||
$pi-gradient-highlighted-dark-rgba-hover: linear-gradient(
|
||||
131deg,
|
||||
rgba(100, 130, 215, 0.44) 0%,
|
||||
rgba(0, 0, 0, 0.25) 100%
|
||||
);
|
||||
// Grey
|
||||
// Grey light
|
||||
$pi-gradient-grey-light: linear-gradient(
|
||||
36.98deg,
|
||||
var(--pi-color-grey-75) 0.75%,
|
||||
var(--pi-color-grey-25) 99.2%
|
||||
);
|
||||
|
||||
$pi-gradient-grey-light-rgba: linear-gradient(
|
||||
131deg,
|
||||
rgba(233, 235, 241, 0.25) 0%,
|
||||
rgba(243, 244, 244, 0.125) 100%
|
||||
);
|
||||
|
||||
$pi-gradient-grey-light-rgba-hover: linear-gradient(
|
||||
131deg,
|
||||
rgba(233, 235, 241, 0.5) 0%,
|
||||
rgba(243, 244, 244, 0.25) 100%
|
||||
);
|
||||
// Grey dark
|
||||
$pi-gradient-grey-dark: linear-gradient(
|
||||
36.98deg,
|
||||
var(--pi-color-grey-900) 0.89%,
|
||||
var(--pi-color-grey) 99.2%
|
||||
);
|
||||
|
||||
$pi-gradient-grey-dark-rgba: linear-gradient(
|
||||
131deg,
|
||||
rgba(61, 61, 61, 0.61) 0%,
|
||||
rgba(0, 0, 0, 0.125) 100%
|
||||
);
|
||||
|
||||
$pi-gradient-grey-dark-rgba-hover: linear-gradient(
|
||||
131deg,
|
||||
rgba(61, 61, 61, 0.81) 0%,
|
||||
rgba(0, 0, 0, 0.25) 100%
|
||||
);
|
||||
|
||||
// White
|
||||
$pi-gradient-white: linear-gradient(
|
||||
36.98deg,
|
||||
var(--pi-color-white-900) 0.89%,
|
||||
var(--pi-color-white) 99.2%
|
||||
);
|
||||
$pi-gradient-white-rgba-disabled: linear-gradient(
|
||||
131deg,
|
||||
rgba(255, 255, 255, 0.25) 0%,
|
||||
rgba(255, 255, 255, 0.33) 100%
|
||||
);
|
||||
$pi-gradient-white-rgba: linear-gradient(
|
||||
131deg,
|
||||
rgba(255, 255, 255, 0.33) 0%,
|
||||
rgba(255, 255, 255, 0.44) 100%
|
||||
);
|
||||
|
||||
$pi-gradient-white-rgba-hover: linear-gradient(
|
||||
131deg,
|
||||
rgba(255, 255, 255, 0.5) 0%,
|
||||
rgba(255, 255, 255, 0.7) 100%
|
||||
);
|
||||
// Disabled
|
||||
// Light
|
||||
$pi-gradient-light-disabled: linear-gradient(
|
||||
36.98deg,
|
||||
rgba(192, 192, 192, 1) 0.75%,
|
||||
rgba(242, 242, 242, 1) 99.2%
|
||||
);
|
||||
// Dark
|
||||
$pi-gradient-dark-disabled: linear-gradient(
|
||||
36.98deg,
|
||||
rgba(138, 138, 138, 1) 0.89%,
|
||||
rgba(182, 182, 182, 1) 99.2%
|
||||
);
|
||||
:root {
|
||||
// Gradient
|
||||
// Primary
|
||||
// Primary & Light
|
||||
--pi-gradient-primary-light: #{$pi-gradient-primary-light};
|
||||
|
||||
--pi-gradient-primary-light-rgba: #{$pi-gradient-primary-light-rgba};
|
||||
--pi-gradient-primary-light-rgba-hover: #{$pi-gradient-primary-light-rgba-hover};
|
||||
// Primary & Dark
|
||||
--pi-gradient-primary-dark: #{$pi-gradient-primary-dark};
|
||||
|
||||
--pi-gradient-primary-dark-rgba: #{$pi-gradient-primary-dark-rgba};
|
||||
--pi-gradient-primary-dark-rgba-hover: #{$pi-gradient-primary-dark-rgba-hover};
|
||||
// Accent
|
||||
// Accent & Light
|
||||
--pi-gradient-accent-light: #{$pi-gradient-accent-light};
|
||||
--pi-gradient-accent-light-rgba: #{$pi-gradient-accent-light-rgba};
|
||||
--pi-gradient-accent-light-rgba-hover: #{$pi-gradient-accent-light-rgba-hover};
|
||||
// Accent & Dark
|
||||
--pi-gradient-accent-dark: #{$pi-gradient-accent-dark};
|
||||
--pi-gradient-accent-dark-rgba: #{$pi-gradient-accent-dark-rgba};
|
||||
--pi-gradient-accent-dark-rgba-hover: #{$pi-gradient-accent-dark-rgba-hover};
|
||||
// Highlighted
|
||||
// Highlighted & Light
|
||||
--pi-gradient-highlighted-light: #{$pi-gradient-highlighted-light};
|
||||
--pi-gradient-highlighted-light-rgba: #{$pi-gradient-highlighted-light-rgba};
|
||||
--pi-gradient-highlighted-light-rgba-hover: #{$pi-gradient-highlighted-light-rgba-hover};
|
||||
// Highlighted & Dark
|
||||
--pi-gradient-highlighted-dark: #{$pi-gradient-highlighted-dark};
|
||||
--pi-gradient-highlighted-dark-rgba: #{$pi-gradient-highlighted-dark-rgba};
|
||||
--pi-gradient-highlighted-dark-rgba-hover: #{$pi-gradient-highlighted-dark-rgba-hover};
|
||||
// Grey
|
||||
// Grey & Light
|
||||
--pi-gradient-grey-light: #{$pi-gradient-grey-light};
|
||||
--pi-gradient-grey-light-rgba: #{$pi-gradient-grey-light-rgba};
|
||||
--pi-gradient-grey-light-rgba-hover: #{$pi-gradient-grey-light-rgba-hover};
|
||||
// Grey & Dark
|
||||
--pi-gradient-grey-dark: #{$pi-gradient-grey-dark};
|
||||
--pi-gradient-grey-dark-rgba: #{$pi-gradient-grey-dark-rgba};
|
||||
--pi-gradient-grey-dark-rgba-hover: #{$pi-gradient-grey-dark-rgba-hover};
|
||||
// White
|
||||
--pi-gradient-white: #{$pi-gradient-white};
|
||||
--pi-gradient-white-rgba: #{$pi-gradient-white-rgba};
|
||||
--pi-gradient-white-rgba-hover: #{$pi-gradient-white-rgba-hover};
|
||||
--pi-gradient-white-rgba-disabled: #{$pi-gradient-white-rgba-disabled};
|
||||
// Disabled
|
||||
--pi-gradient-light-disabled: #{$pi-gradient-light-disabled};
|
||||
--pi-gradient-dark-disabled: #{$pi-gradient-dark-disabled};
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
// Font sizes variables
|
||||
$pi-public-font-size-xxx-large: 4.25rem; // 68px
|
||||
$pi-public-font-size-xx-large: 3.875rem; // 62px
|
||||
|
||||
// Global sizes
|
||||
$pi-public-height-header-desktop: 4.5rem; // 72px
|
||||
$pi-public-height-header-mobile: 4.25rem; // 68px
|
||||
$pi-public-width-container: 72rem; // 1152px
|
||||
$pi-public-width-container-l: 90rem; // 1440px
|
||||
|
||||
// Root variables
|
||||
:root {
|
||||
// Font sizes
|
||||
--pi-public-font-size-xxx-large: #{$pi-public-font-size-xxx-large}; // 4.5rem; // 72px
|
||||
--pi-public-font-size-xx-large: #{$pi-public-font-size-xx-large}; // 3.875rem; // 62px
|
||||
|
||||
// Global sizes
|
||||
--pi-public-height-header-desktop: #{$pi-public-height-header-desktop}; // 5.25rem; // 84px
|
||||
--pi-public-height-header-mobile: #{$pi-public-height-header-mobile}; // 4.125rem; // 66px
|
||||
--pi-public-width-container: #{$pi-public-width-container}; // 72rem; // 1152px
|
||||
--pi-public-width-container-l: #{$pi-public-width-container-l}; // 90rem; // 1440px
|
||||
}
|
||||
5
libs/ui/src/lib/styles/common/abstracts/index.scss
Normal file
5
libs/ui/src/lib/styles/common/abstracts/index.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
@forward 'pi-color-variables';
|
||||
@forward 'pi-font-sizes-variables';
|
||||
@forward 'pi-gradient-variables';
|
||||
@forward 'pi-public-variables';
|
||||
@forward 'pi-global-variables';
|
||||
594
libs/ui/src/lib/styles/common/base/_pi-reset.scss
Normal file
594
libs/ui/src/lib/styles/common/base/_pi-reset.scss
Normal file
@@ -0,0 +1,594 @@
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
font-size: 1rem;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
article,
|
||||
aside,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Body
|
||||
body {
|
||||
margin: 0;
|
||||
-ms-overflow-style: none;
|
||||
line-height: 1.4;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
color: var(--pi-color-grey-900);
|
||||
scrollbar-width: none;
|
||||
color: var(--pi-color-grey-900);
|
||||
scroll-behavior: smooth;
|
||||
overflow-x: hidden;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
font: {
|
||||
family: 'Soehne', Helvetica, Arial, sans-serif;
|
||||
size: 0.9375rem;
|
||||
weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
// EN
|
||||
html[dir='ltr'] {
|
||||
body {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
// AR
|
||||
html[dir='rtl'] {
|
||||
body {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
[tabindex='-1']:focus {
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
// Content grouping
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
// Typography
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: 133.33%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--pi-color-primary);
|
||||
}
|
||||
|
||||
.pi-inner-blog {
|
||||
& > div {
|
||||
& > *:nth-child(n + 2):not(h1) {
|
||||
display: block;
|
||||
margin-top: var(--pi-spacing-x-large);
|
||||
}
|
||||
& > h1 {
|
||||
margin-top: var(--pi-spacing-xxxx-large);
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
& > span {
|
||||
font: {
|
||||
size: var(--pi-font-size-xx-large);
|
||||
weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
ul {
|
||||
li {
|
||||
h3 {
|
||||
& > span {
|
||||
font: {
|
||||
size: var(--pi-font-size-x-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Fonts
|
||||
.pi-layout,
|
||||
.cdk-overlay-container {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.pi-domain-component {
|
||||
&.pi-component {
|
||||
& > *:nth-child(n + 2) {
|
||||
margin-top: var(--pi-spacing-x-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
p + p {
|
||||
margin-top: var(--pi-spacing-medium);
|
||||
}
|
||||
|
||||
address {
|
||||
margin-bottom: 0;
|
||||
font-style: normal;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ul ul,
|
||||
ol ul,
|
||||
ul ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
li + li {
|
||||
margin-top: var(--pi-spacing-medium);
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
// EN
|
||||
html[dir='ltr'] {
|
||||
dd {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// AR
|
||||
html[dir='rtl'] {
|
||||
dd {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
// all browsers.
|
||||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
// Hr
|
||||
hr {
|
||||
height: var(--pi-spacing-xxx-small);
|
||||
max-width: 4.5rem;
|
||||
border-radius: 0.25rem;
|
||||
border: unset;
|
||||
&.pi-color__primary {
|
||||
background-color: var(--pi-color-primary);
|
||||
}
|
||||
&.pi-color__accent {
|
||||
background-color: var(--pi-color-accent);
|
||||
}
|
||||
&.pi-color__warn {
|
||||
background-color: var(--pi-color-warn);
|
||||
}
|
||||
}
|
||||
|
||||
// Links
|
||||
a {
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
a:not([href]):not([tabindex]) {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
&:not(button) {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Code
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
// Figures
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Images and content
|
||||
img {
|
||||
vertical-align: middle;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
svg {
|
||||
overflow: hidden;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Tables
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
caption {
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
caption-side: bottom;
|
||||
}
|
||||
|
||||
// EN
|
||||
html[dir='ltr'] {
|
||||
caption {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
// AR
|
||||
html[dir='rtl'] {
|
||||
caption {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: inherit;
|
||||
}
|
||||
|
||||
// Forms
|
||||
label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
optgroup,
|
||||
textarea {
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
:focus-visible,
|
||||
:focus {
|
||||
&:not(.pi-button__appearance--outline) {
|
||||
outline: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
select {
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
button,
|
||||
[type='button'],
|
||||
[type='reset'],
|
||||
[type='submit'] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type='button']::-moz-focus-inner,
|
||||
[type='reset']::-moz-focus-inner,
|
||||
[type='submit']::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
input[type='radio'],
|
||||
input[type='checkbox'] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input[type='date'],
|
||||
input[type='time'],
|
||||
input[type='datetime-local'],
|
||||
input[type='month'] {
|
||||
-webkit-appearance: listbox;
|
||||
}
|
||||
|
||||
input[type='search']::-webkit-search-decoration,
|
||||
input[type='search']::-webkit-search-cancel-button,
|
||||
input[type='search']::-webkit-search-results-button,
|
||||
input[type='search']::-webkit-search-results-decoration {
|
||||
display: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
&:-webkit-autofill {
|
||||
border: none;
|
||||
-webkit-text-fill-color: var(--pi-color-grey);
|
||||
box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
background-color: white;
|
||||
.mat-icon {
|
||||
color: var(--pi-color-grey-200);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border: none;
|
||||
-webkit-text-fill-color: var(--pi-color-grey);
|
||||
box-shadow: 0 0 0 62.5rem transparent inset;
|
||||
-webkit-box-shadow: 0 0 0 62.5rem transparent inset;
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
background-color: white;
|
||||
.mat-icon {
|
||||
color: var(--pi-color-grey);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
textarea:-webkit-autofill,
|
||||
textarea:-webkit-autofill:hover,
|
||||
textarea:-webkit-autofill:focus,
|
||||
select:-webkit-autofill,
|
||||
select:-webkit-autofill:hover,
|
||||
select:-webkit-autofill:focus {
|
||||
-webkit-text-fill-color: var(--pi-color-grey);
|
||||
box-shadow: 0 0 0 62.5rem white inset;
|
||||
-webkit-box-shadow: 0 0 0 62.5rem white inset;
|
||||
-webkit-transition: background-color 5000s ease-in-out 0s;
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
all: unset;
|
||||
width: -webkit-fill-available;
|
||||
}
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
[type='number']::-webkit-inner-spin-button,
|
||||
[type='number']::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
[type='search'] {
|
||||
outline-offset: -0.125rem;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
[type='search']::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
font: inherit;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// Wrapper common
|
||||
.pi-wrapper {
|
||||
display: block;
|
||||
}
|
||||
.pi-shell {
|
||||
& > div {
|
||||
&:not(.is-fullscreen) {
|
||||
// Generic Scroll
|
||||
&::-webkit-scrollbar {
|
||||
width: var(--pi-spacing-xxx-small);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: rgba($color: #8695b5, $alpha: 0.4);
|
||||
border-radius: var(--pi-border-radius-small);
|
||||
|
||||
&:hover {
|
||||
transition: var(--pi-animation);
|
||||
background-color: rgba($color: #8695b5, $alpha: 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Generic Scroll
|
||||
::-webkit-scrollbar {
|
||||
width: var(--pi-spacing-xxx-small);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba($color: #8695b5, $alpha: 0.3);
|
||||
border-radius: var(--pi-border-radius-small);
|
||||
|
||||
&:hover {
|
||||
transition: var(--pi-animation);
|
||||
background-color: rgba($color: #8695b5, $alpha: 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
button,
|
||||
.pi-input,
|
||||
[class*='mat-'] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
html {
|
||||
.intercom-lightweight-app-launcher {
|
||||
background: var(--pi-color-accent-300);
|
||||
}
|
||||
// Mobile
|
||||
&.is-mobile {
|
||||
.intercom-lightweight-app-launcher {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
// Small device
|
||||
&:not(.is-desktop) {
|
||||
@media screen and (max-width: 62rem) {
|
||||
.intercom-lightweight-app-launcher {
|
||||
bottom: 5.75rem;
|
||||
left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(.is-mobile) {
|
||||
@media screen and (min-width: 62rem) {
|
||||
&.is-tablet__large {
|
||||
.intercom-lightweight-app-launcher {
|
||||
left: 3.75rem;
|
||||
bottom: 5.625rem;
|
||||
}
|
||||
}
|
||||
&.is-desktop {
|
||||
.is-fullscreen {
|
||||
.intercom-lightweight-app-launcher {
|
||||
left: 1.5rem;
|
||||
bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
:not(.is-fullscreen) {
|
||||
.intercom-lightweight-app-launcher {
|
||||
right: 1.5rem;
|
||||
bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 62rem) {
|
||||
#hubspot-messages-iframe-container {
|
||||
&.widget-align-right {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
119
libs/ui/src/lib/styles/common/base/_pi-tipography.scss
Normal file
119
libs/ui/src/lib/styles/common/base/_pi-tipography.scss
Normal file
@@ -0,0 +1,119 @@
|
||||
// Light - 300
|
||||
@font-face {
|
||||
font-family: 'Soehne';
|
||||
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.eot');
|
||||
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.eot?#iefix')
|
||||
format('embedded-opentype'),
|
||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.woff2') format('woff2'),
|
||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.woff') format('woff'),
|
||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.ttf') format('truetype'),
|
||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht.svg#soehne-leicht')
|
||||
format('svg');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
// Light italic - 300
|
||||
@font-face {
|
||||
font-family: 'Soehne';
|
||||
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.eot');
|
||||
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.eot?#iefix')
|
||||
format('embedded-opentype'),
|
||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.woff2')
|
||||
format('woff2'),
|
||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.woff')
|
||||
format('woff'),
|
||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.ttf')
|
||||
format('truetype'),
|
||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-leicht-kursiv.svg#soehne-leicht-kursiv')
|
||||
format('svg');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
// Regular - 400
|
||||
@font-face {
|
||||
font-family: 'Soehne';
|
||||
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.eot');
|
||||
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.eot?#iefix')
|
||||
format('embedded-opentype'),
|
||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.woff2') format('woff2'),
|
||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.woff') format('woff'),
|
||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.ttf') format('truetype'),
|
||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch.svg#soehne-buch')
|
||||
format('svg');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
// Regular italic - 400
|
||||
@font-face {
|
||||
font-family: 'Soehne';
|
||||
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.eot');
|
||||
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.eot?#iefix')
|
||||
format('embedded-opentype'),
|
||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.woff2')
|
||||
format('woff2'),
|
||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.woff') format('woff'),
|
||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.ttf')
|
||||
format('truetype'),
|
||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-buch-kursiv.svg#soehne-buch-kursiv')
|
||||
format('svg');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
// Medium - 600
|
||||
@font-face {
|
||||
font-family: 'Soehne';
|
||||
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.eot');
|
||||
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.eot?#iefix')
|
||||
format('embedded-opentype'),
|
||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.woff2') format('woff2'),
|
||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.woff') format('woff'),
|
||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.ttf') format('truetype'),
|
||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-kraftig.svg#soehne-kraftig')
|
||||
format('svg');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
// Bold - 700
|
||||
@font-face {
|
||||
font-family: 'Soehne';
|
||||
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.eot');
|
||||
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.eot?#iefix')
|
||||
format('embedded-opentype'),
|
||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.woff2') format('woff2'),
|
||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.woff') format('woff'),
|
||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.ttf') format('truetype'),
|
||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-halbfett.svg#soehne-halbfett')
|
||||
format('svg');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
// Black - 800
|
||||
@font-face {
|
||||
font-family: 'Soehne';
|
||||
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.eot');
|
||||
src: url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.eot?#iefix')
|
||||
format('embedded-opentype'),
|
||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.woff2')
|
||||
format('woff2'),
|
||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.woff')
|
||||
format('woff'),
|
||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.ttf')
|
||||
format('truetype'),
|
||||
url('https://d2m4265u67f2xu.cloudfront.net/assets/fonts/soehne-dreiviertelfett.svg#soehne-dreiviertelfett')
|
||||
format('svg');
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
2
libs/ui/src/lib/styles/common/base/index.scss
Normal file
2
libs/ui/src/lib/styles/common/base/index.scss
Normal file
@@ -0,0 +1,2 @@
|
||||
@forward 'pi-reset';
|
||||
@forward 'pi-tipography';
|
||||
116
libs/ui/src/lib/styles/common/components/_pi-accordion.scss
Normal file
116
libs/ui/src/lib/styles/common/components/_pi-accordion.scss
Normal file
@@ -0,0 +1,116 @@
|
||||
@mixin accordionHeaderDescription($white-space: wrap) {
|
||||
.pi-layout {
|
||||
&.pi-layout__02-full-width {
|
||||
.pi-accordion {
|
||||
& > .pi-accordion-item {
|
||||
& > .pi-accordion-item-content {
|
||||
&.pi-accordion-item-content__header {
|
||||
& > .pi-text-viewer {
|
||||
& > article {
|
||||
& > span {
|
||||
white-space: $white-space;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pi-accordion {
|
||||
& > .pi-accordion-item {
|
||||
& > .pi-accordion-item-content {
|
||||
&.pi-accordion-item-content__header {
|
||||
& > .pi-text-viewer {
|
||||
overflow: hidden;
|
||||
& > article {
|
||||
overflow: hidden;
|
||||
& > span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pi-accordion {
|
||||
.pi-note-content__label {
|
||||
font: {
|
||||
size: var(--pi-font-size-x-small);
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal
|
||||
&.pi-accordion__direction--horizontal {
|
||||
& > * {
|
||||
& > .pi-accordion-item-content {
|
||||
&.pi-accordion-item-content__header {
|
||||
&.is-expanded {
|
||||
.pi-list-item-content {
|
||||
&.pi-list-item-content__left {
|
||||
font: {
|
||||
weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(.is-disabled) {
|
||||
&:hover {
|
||||
* {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Type
|
||||
// Default
|
||||
&:not(.pi-accordion__appearance--outline) {
|
||||
// Footer
|
||||
& > .pi-accordion-footer {
|
||||
padding: var(--pi-spacing-x-large) var(--pi-spacing-xx-small) var(--pi-spacing-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
&.is-mobile {
|
||||
@include accordionHeaderDescription;
|
||||
.pi-layout {
|
||||
&.pi-layout__main {
|
||||
.pi-accordion {
|
||||
// Default (Vertical)
|
||||
&:not(.pi-accordion__direction--horizontal) {
|
||||
// Accordion item
|
||||
& > .pi-accordion-item {
|
||||
& > .pi-accordion-item-content__header {
|
||||
&.has-status {
|
||||
flex-direction: column-reverse;
|
||||
align-items: flex-start;
|
||||
gap: var(--pi-spacing-x-large);
|
||||
& > aside {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
& > span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(.is-mobile) {
|
||||
@include accordionHeaderDescription(nowrap);
|
||||
}
|
||||
}
|
||||
545
libs/ui/src/lib/styles/common/components/_pi-card.scss
Normal file
545
libs/ui/src/lib/styles/common/components/_pi-card.scss
Normal file
@@ -0,0 +1,545 @@
|
||||
// Block conmtents
|
||||
// Top
|
||||
@mixin cardContentTop {
|
||||
&.pi-card-content__top {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
// Center
|
||||
@mixin cardContentCenter {
|
||||
&.pi-card-content__center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
// Bottom
|
||||
@mixin cardContentBottom {
|
||||
&.pi-card-content__bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
// Flex
|
||||
// Align items
|
||||
@mixin cardAlignment($aligment: flex-start) {
|
||||
align-items: $aligment;
|
||||
.pi-card-content {
|
||||
justify-content: $aligment;
|
||||
}
|
||||
}
|
||||
// Gap
|
||||
@mixin cardGap($gap) {
|
||||
gap: var(--pi-spacing-#{$gap});
|
||||
}
|
||||
|
||||
// Spacings
|
||||
// Pading
|
||||
@mixin cardPadding($padding) {
|
||||
padding: var(--pi-spacing-#{$padding});
|
||||
}
|
||||
// Inner Pading
|
||||
@mixin cardInnerPadding($large-padding: unset, $small-padding) {
|
||||
padding: unset;
|
||||
|
||||
&:not(.has-equal-inner-padding) {
|
||||
& > *:first-child {
|
||||
padding-top: var(--pi-spacing-#{$large-padding});
|
||||
padding-left: var(--pi-spacing-#{$large-padding});
|
||||
padding-bottom: var(--pi-spacing-#{$large-padding});
|
||||
padding-right: var(--pi-spacing-#{$large-padding});
|
||||
border-radius: var(--pi-border-radius-large) var(--pi-border-radius-large) 0 0;
|
||||
}
|
||||
|
||||
& > *:nth-child(2) {
|
||||
&:not(:last-child) {
|
||||
padding-top: var(--pi-spacing-#{$small-padding});
|
||||
padding-left: var(--pi-spacing-#{$large-padding});
|
||||
padding-bottom: 0;
|
||||
padding-right: var(--pi-spacing-#{$large-padding});
|
||||
}
|
||||
}
|
||||
|
||||
& > *:last-child {
|
||||
padding-top: var(--pi-spacing-#{$small-padding});
|
||||
padding-bottom: var(--pi-spacing-#{$small-padding});
|
||||
border-radius: 0 0 var(--pi-border-radius-large) var(--pi-border-radius-large);
|
||||
}
|
||||
|
||||
& > * {
|
||||
padding: 0 var(--pi-spacing-#{$large-padding}) var(--pi-spacing-#{$small-padding});
|
||||
}
|
||||
}
|
||||
&.has-equal-inner-padding {
|
||||
& > *:first-child {
|
||||
padding-left: var(--pi-spacing-#{$large-padding});
|
||||
padding-top: var(--pi-spacing-#{$large-padding});
|
||||
padding-bottom: var(--pi-spacing-#{$small-padding});
|
||||
padding-right: var(--pi-spacing-#{$large-padding});
|
||||
border-radius: var(--pi-border-radius-large) var(--pi-border-radius-large) 0 0;
|
||||
}
|
||||
|
||||
& > *:last-child {
|
||||
padding-top: var(--pi-spacing-#{$large-padding});
|
||||
padding-bottom: var(--pi-spacing-#{$large-padding});
|
||||
border-radius: 0 0 var(--pi-border-radius-large) var(--pi-border-radius-large);
|
||||
}
|
||||
|
||||
& > * {
|
||||
&:not(:first-child) {
|
||||
padding: var(--pi-spacing-#{$small-padding}) var(--pi-spacing-#{$large-padding})
|
||||
var(--pi-spacing-#{$small-padding});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Card
|
||||
@mixin cardColor($color) {
|
||||
// Mode Light
|
||||
&.pi-color__mode--light {
|
||||
// Light Translucent
|
||||
&[class*='pi-color__opacity'] {
|
||||
// Light Glass gradient
|
||||
background-image: var(--pi-gradient-#{$color}-light-rgba);
|
||||
&.is-clickable {
|
||||
&:hover {
|
||||
// Light Glass gradient hover
|
||||
background-image: var(--pi-gradient-#{$color}-light-rgba-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Light & Is stroked
|
||||
&.is-stroked {
|
||||
border-color: var(--pi-color-#{$color}-75);
|
||||
&.is-clickable {
|
||||
&:hover {
|
||||
border-color: var(--pi-color-#{$color}-200);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mode Dark
|
||||
&.pi-color__mode--dark {
|
||||
// Dark Translucent
|
||||
&[class*='pi-color__opacity'] {
|
||||
// Glass gradient
|
||||
background-image: var(--pi-gradient-#{$color}-dark-rgba);
|
||||
// Dark Translucent Gradient & Is Stroked
|
||||
&.is-stroked {
|
||||
border-color: var(--pi-color-#{$color});
|
||||
}
|
||||
&.is-clickable {
|
||||
&:hover {
|
||||
// Light Glass gradient hover
|
||||
background-image: var(--pi-gradient-#{$color}-dark-rgba-hover);
|
||||
// Dark Translucent Gradient & Is Stroked Hover
|
||||
&.is-stroked {
|
||||
border-color: var(--pi-color-#{$color}-900);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin privateOpaqueCardColor($color) {
|
||||
// Mode light
|
||||
&.pi-color__mode--light {
|
||||
// Light Opaque
|
||||
&:not([class*='pi-color__opacity']):not([class*='pi-color__density']) {
|
||||
// Solid light color
|
||||
background-color: var(--pi-color-#{$color}-25);
|
||||
}
|
||||
}
|
||||
// Mode dark
|
||||
&.pi-color__mode--dark {
|
||||
// Dark Opaque
|
||||
&:not([class*='pi-color__opacity']):not([class*='pi-color__density']) {
|
||||
background-color: var(--pi-color-#{$color});
|
||||
// Solid Dark Color & Is Stroked
|
||||
&.is-stroked {
|
||||
border-color: var(--pi-color-#{$color}-900);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Density
|
||||
// 10
|
||||
&.pi-color__density--10 {
|
||||
// Solid light color 10
|
||||
background-color: var(--pi-color-#{$color}-10);
|
||||
}
|
||||
// 50
|
||||
&.pi-color__density--50 {
|
||||
// Solid light color 50
|
||||
background-color: var(--pi-color-#{$color}-50);
|
||||
}
|
||||
// 75
|
||||
&.pi-color__density--75 {
|
||||
// Solid light color 75
|
||||
background-color: var(--pi-color-#{$color}-75);
|
||||
}
|
||||
// 100
|
||||
&.pi-color__density--100 {
|
||||
// Solid light color 100
|
||||
background-color: var(--pi-color-#{$color}-100);
|
||||
}
|
||||
// 200
|
||||
&.pi-color__density--200 {
|
||||
// Solid light color 200
|
||||
background-color: var(--pi-color-#{$color}-200);
|
||||
}
|
||||
// 300
|
||||
&.pi-color__density--300 {
|
||||
// Solid light color 300
|
||||
background-color: var(--pi-color-#{$color}-300);
|
||||
}
|
||||
// 400
|
||||
&.pi-color__density--400 {
|
||||
// Solid light color 400
|
||||
background-color: var(--pi-color-#{$color}-400);
|
||||
}
|
||||
// 900
|
||||
&.pi-color__density--900 {
|
||||
// Solid light color 900
|
||||
background-color: var(--pi-color-#{$color}-900);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin publicOpaqueCardColor($color) {
|
||||
// Mode light
|
||||
&.pi-color__mode--light {
|
||||
// Light Opaque
|
||||
&:not([class*='pi-color__opacity']) {
|
||||
// Opaque light gradient
|
||||
background-image: var(--pi-gradient-#{$color}-light);
|
||||
}
|
||||
}
|
||||
// Mode dark
|
||||
&.pi-color__mode--dark {
|
||||
&:not([class*='pi-color__opacity']) {
|
||||
// Opaque Light Gradient
|
||||
background-image: var(--pi-gradient-#{$color}-dark);
|
||||
// Dark Opaque Gradient & Is Stroked
|
||||
&.is-stroked {
|
||||
border-color: var(--pi-color-#{$color});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin cardColorWhite {
|
||||
// Light Translucent
|
||||
&[class*='pi-color__opacity'] {
|
||||
// Light Glass color
|
||||
background-color: var(--pi-color-white-rgba-03);
|
||||
&.is-clickable {
|
||||
&:hover {
|
||||
// Light Glass color hover
|
||||
background-color: var(--pi-color-white-rgba-06);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Light Opaque
|
||||
&:not([class*='pi-color__opacity']) {
|
||||
background-color: var(--pi-color-white);
|
||||
}
|
||||
// Light & Is stroked
|
||||
&.is-stroked {
|
||||
border-color: var(--pi-color-white-900);
|
||||
}
|
||||
}
|
||||
|
||||
// Card contents
|
||||
@mixin cardContentColor($background-color) {
|
||||
&:not([class*='pi-color__density']) {
|
||||
background-color: var(--pi-color-#{$background-color});
|
||||
}
|
||||
|
||||
&[class*='pi-color__density'] {
|
||||
&.pi-card-content__top {
|
||||
border-bottom: 1px solid;
|
||||
border-bottom-color: var(--pi-color-white);
|
||||
}
|
||||
&:not(.pi-color__density--10):not(.pi-color__density--25) {
|
||||
background-color: var(--pi-color-#{$background-color}-50);
|
||||
}
|
||||
&.pi-color__density--10 {
|
||||
background-color: var(--pi-color-#{$background-color}-10);
|
||||
}
|
||||
&.pi-color__density--25 {
|
||||
background-color: var(--pi-color-#{$background-color}-25);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Card
|
||||
.pi-card {
|
||||
&:not(.pi-grid-item) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: -webkit-fill-available;
|
||||
padding: var(--pi-spacing-xx-large);
|
||||
border-radius: var(--pi-border-radius-large);
|
||||
transition: var(--pi-animation);
|
||||
|
||||
&:hover {
|
||||
transition: var(--pi-animation);
|
||||
}
|
||||
&:not(:hover) {
|
||||
transition: var(--pi-animation);
|
||||
}
|
||||
|
||||
// Is Stroked
|
||||
&.is-stroked {
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
// Is Clickable
|
||||
&.is-clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Glass
|
||||
&[class*='pi-color__opacity'] {
|
||||
-webkit-backdrop-filter: blur(0.75rem);
|
||||
backdrop-filter: blur(0.75rem);
|
||||
}
|
||||
|
||||
// Has Shadow
|
||||
&.has-shadow {
|
||||
box-shadow: var(--pi-box-shadow-panel);
|
||||
}
|
||||
&:not(.has-shadow) {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// Alignment
|
||||
// Flex-start
|
||||
&.pi-card__align-items--flex-start {
|
||||
@include cardAlignment;
|
||||
}
|
||||
// Center
|
||||
&.pi-card__align-items--center {
|
||||
@include cardAlignment(center);
|
||||
}
|
||||
// Flex-end
|
||||
&.pi-card__align-items--flex-end {
|
||||
@include cardAlignment(flex-end);
|
||||
}
|
||||
|
||||
// Gap
|
||||
// S
|
||||
&.pi-card__gap--s {
|
||||
@include cardGap(small);
|
||||
}
|
||||
// M
|
||||
&.pi-card__gap--m {
|
||||
@include cardGap(medium);
|
||||
}
|
||||
// L
|
||||
&.pi-card__gap--l {
|
||||
@include cardGap(large);
|
||||
}
|
||||
// XL
|
||||
&.pi-card__gap--xl {
|
||||
@include cardGap(x-large);
|
||||
}
|
||||
// XXL
|
||||
&.pi-card__gap--xxl {
|
||||
@include cardGap(xx-large);
|
||||
}
|
||||
// XXXL
|
||||
&.pi-card__gap--xxxl {
|
||||
@include cardGap(xxx-large);
|
||||
}
|
||||
// Padding
|
||||
// XS
|
||||
&.pi-card__padding--xxs {
|
||||
@include cardPadding(xx-small);
|
||||
}
|
||||
// XS
|
||||
&.pi-card__padding--xs {
|
||||
@include cardPadding(x-small);
|
||||
}
|
||||
// S
|
||||
&.pi-card__padding--s {
|
||||
@include cardPadding(small);
|
||||
}
|
||||
// M
|
||||
&.pi-card__padding--m {
|
||||
@include cardPadding(medium);
|
||||
}
|
||||
// L
|
||||
&.pi-card__padding--l {
|
||||
@include cardPadding(large);
|
||||
}
|
||||
// XL
|
||||
&.pi-card__padding--xl {
|
||||
@include cardPadding(x-large);
|
||||
}
|
||||
// XXL
|
||||
&.pi-card__padding--xxl {
|
||||
@include cardPadding(xx-large);
|
||||
}
|
||||
|
||||
// Inner padding
|
||||
// XS
|
||||
&.pi-card__inner-padding--xxs {
|
||||
@include cardInnerPadding(xx-small, xxxx-small);
|
||||
}
|
||||
// XS
|
||||
&.pi-card__inner-padding--xs {
|
||||
@include cardInnerPadding(x-small, xxx-small);
|
||||
}
|
||||
// S
|
||||
&.pi-card__inner-padding--s {
|
||||
@include cardInnerPadding(small, xx-small);
|
||||
}
|
||||
// M
|
||||
&.pi-card__inner-padding--m {
|
||||
@include cardInnerPadding(medium, x-small);
|
||||
}
|
||||
// L
|
||||
&.pi-card__inner-padding--l {
|
||||
@include cardInnerPadding(large, small);
|
||||
}
|
||||
// XL
|
||||
&.pi-card__inner-padding--xl {
|
||||
@include cardInnerPadding(x-large, medium);
|
||||
}
|
||||
// XXL
|
||||
&.pi-card__inner-padding--xxl {
|
||||
@include cardInnerPadding(xx-large, x-large);
|
||||
}
|
||||
|
||||
// Color
|
||||
// Primary
|
||||
&.pi-color__primary {
|
||||
@include cardColor(primary);
|
||||
}
|
||||
// Accent
|
||||
&.pi-color__accent {
|
||||
@include cardColor(accent);
|
||||
}
|
||||
// Highlighted
|
||||
&.pi-color__highlighted {
|
||||
@include cardColor(highlighted);
|
||||
}
|
||||
// Grey
|
||||
&.pi-color__grey {
|
||||
@include cardColor(grey);
|
||||
}
|
||||
// White
|
||||
&.pi-color__white {
|
||||
@include cardColorWhite;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-public {
|
||||
// Color
|
||||
// Primary
|
||||
&.pi-color__primary {
|
||||
@include publicOpaqueCardColor(primary);
|
||||
}
|
||||
// Accent
|
||||
&.pi-color__accent {
|
||||
@include publicOpaqueCardColor(accent);
|
||||
}
|
||||
// Highlighted
|
||||
&.pi-color__highlighted {
|
||||
@include publicOpaqueCardColor(highlighted);
|
||||
}
|
||||
// Grey
|
||||
&.pi-color__grey {
|
||||
@include publicOpaqueCardColor(grey);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-private,
|
||||
&:not(.is-public) {
|
||||
// Color
|
||||
// Primary
|
||||
&.pi-color__primary {
|
||||
@include privateOpaqueCardColor(primary);
|
||||
}
|
||||
// Accent
|
||||
&.pi-color__accent {
|
||||
@include privateOpaqueCardColor(accent);
|
||||
}
|
||||
// Highlighted
|
||||
&.pi-color__highlighted {
|
||||
@include privateOpaqueCardColor(highlighted);
|
||||
}
|
||||
// Grey
|
||||
&.pi-color__grey {
|
||||
@include privateOpaqueCardColor(grey);
|
||||
}
|
||||
}
|
||||
& > .pi-card-content {
|
||||
&.pi-color__primary {
|
||||
@include cardContentColor(primary);
|
||||
}
|
||||
// Accent
|
||||
&.pi-color__accent {
|
||||
@include cardContentColor(accent);
|
||||
}
|
||||
// Highlighted
|
||||
&.pi-color__highlighted {
|
||||
@include cardContentColor(highlighted);
|
||||
}
|
||||
// Grey
|
||||
&.pi-color__grey {
|
||||
@include cardContentColor(grey);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pi-shell__deale-website,
|
||||
.is-public {
|
||||
.pi-card {
|
||||
// Color
|
||||
// Primary
|
||||
&.pi-color__primary {
|
||||
@include publicOpaqueCardColor(primary);
|
||||
}
|
||||
// Accent
|
||||
&.pi-color__accent {
|
||||
@include publicOpaqueCardColor(accent);
|
||||
}
|
||||
// Highlighted
|
||||
&.pi-color__highlighted {
|
||||
@include publicOpaqueCardColor(highlighted);
|
||||
}
|
||||
// Grey
|
||||
&.pi-color__grey {
|
||||
@include publicOpaqueCardColor(grey);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-private {
|
||||
.pi-card {
|
||||
// Color
|
||||
// Primary
|
||||
&.pi-color__primary {
|
||||
@include privateOpaqueCardColor(primary);
|
||||
}
|
||||
// Accent
|
||||
&.pi-color__accent {
|
||||
@include privateOpaqueCardColor(accent);
|
||||
}
|
||||
// Highlighted
|
||||
&.pi-color__highlighted {
|
||||
@include privateOpaqueCardColor(highlighted);
|
||||
}
|
||||
// Grey
|
||||
&.pi-color__grey {
|
||||
@include privateOpaqueCardColor(grey);
|
||||
}
|
||||
}
|
||||
}
|
||||
105
libs/ui/src/lib/styles/common/components/_pi-divider.scss
Normal file
105
libs/ui/src/lib/styles/common/components/_pi-divider.scss
Normal file
@@ -0,0 +1,105 @@
|
||||
@mixin dividerIconSize($size) {
|
||||
.pi-icon {
|
||||
.mat-icon {
|
||||
height: var(--pi-spacing-#{$size}) !important;
|
||||
width: var(--pi-spacing-#{$size}) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin dividerIconColor($icon-color) {
|
||||
.pi-icon {
|
||||
&:not(.pi-icon__appearance--fill) {
|
||||
.mat-icon {
|
||||
color: var(--pi-color-#{$icon-color});
|
||||
}
|
||||
}
|
||||
&.pi-icon__appearance--fill {
|
||||
.mat-icon {
|
||||
color: var(--pi-color-#{$icon-color});
|
||||
}
|
||||
&.is-stroked {
|
||||
border-color: var(--pi-color-#{$icon-color});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pi-divider {
|
||||
// Icon Color
|
||||
&.pi-color__primary {
|
||||
@include dividerIconColor(primary);
|
||||
}
|
||||
&.pi-color__accent {
|
||||
@include dividerIconColor(accent);
|
||||
}
|
||||
&.pi-color__warn {
|
||||
@include dividerIconColor(warn);
|
||||
}
|
||||
&.pi-color__success {
|
||||
@include dividerIconColor(success);
|
||||
}
|
||||
&.pi-color__white {
|
||||
@include dividerIconColor(white);
|
||||
}
|
||||
&.pi-color__black {
|
||||
@include dividerIconColor(black);
|
||||
}
|
||||
&.pi-color__grey {
|
||||
@include dividerIconColor(grey-100);
|
||||
}
|
||||
&.pi-color__highlighted {
|
||||
@include dividerIconColor(highlighted);
|
||||
}
|
||||
&.pi-color__black-primary {
|
||||
@include dividerIconColor(primary);
|
||||
}
|
||||
&.pi-color__primary-black {
|
||||
@include dividerIconColor(black);
|
||||
}
|
||||
&.pi-color__black-accent {
|
||||
@include dividerIconColor(accent);
|
||||
}
|
||||
&.pi-color__accent-black {
|
||||
@include dividerIconColor(black);
|
||||
}
|
||||
&.pi-color__dark-black {
|
||||
@include dividerIconColor(black);
|
||||
}
|
||||
&.pi-color__black-dark {
|
||||
@include dividerIconColor(grey-400);
|
||||
}
|
||||
&.pi-color__grey-black {
|
||||
@include dividerIconColor(black);
|
||||
}
|
||||
&.pi-color__black-grey {
|
||||
@include dividerIconColor(grey-200);
|
||||
}
|
||||
&.pi-color__highlighted-grey {
|
||||
@include dividerIconColor(grey-200);
|
||||
}
|
||||
&.pi-color__grey-highlighted {
|
||||
@include dividerIconColor(highlighted);
|
||||
}
|
||||
// Icon size
|
||||
// X small
|
||||
&.pi-divider__icon-size--x-small {
|
||||
@include dividerIconSize(large);
|
||||
}
|
||||
// small
|
||||
&.pi-divider__icon-size--small {
|
||||
@include dividerIconSize(x-large);
|
||||
}
|
||||
// medium
|
||||
&.pi-divider__icon-size--medium {
|
||||
@include dividerIconSize(xx-large);
|
||||
}
|
||||
// large
|
||||
&.pi-divider__icon-size--large {
|
||||
@include dividerIconSize(xxx-large);
|
||||
}
|
||||
// X large
|
||||
&.pi-divider__icon-size--x-large {
|
||||
@include dividerIconSize(xxxx-large);
|
||||
}
|
||||
}
|
||||
71
libs/ui/src/lib/styles/common/components/_pi-headline.scss
Normal file
71
libs/ui/src/lib/styles/common/components/_pi-headline.scss
Normal file
@@ -0,0 +1,71 @@
|
||||
// Column
|
||||
.pi-headline {
|
||||
&.pi-headline__flex--column {
|
||||
flex-direction: column;
|
||||
&.pi-headline__align--center {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
aside {
|
||||
button {
|
||||
margin: 1.75rem auto 0;
|
||||
}
|
||||
}
|
||||
.pi-headline-content {
|
||||
& > *:is(h1, h2, h3, h4, h5, p, span, strong, i) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
figure {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Headline Content Directives
|
||||
.pi-headline-content {
|
||||
h1 {
|
||||
font: {
|
||||
weight: unset;
|
||||
}
|
||||
}
|
||||
&.pi-headline-content__description {
|
||||
display: block;
|
||||
& > *:nth-child(n + 2) {
|
||||
margin-top: var(--pi-spacing-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
.pi-headline-content + .pi-headline-content {
|
||||
margin-top: var(--pi-spacing-x-large);
|
||||
}
|
||||
|
||||
.pi-background-image__animation--infinite {
|
||||
animation: opacityAnimation 2.5s infinite;
|
||||
}
|
||||
|
||||
.pi-layout {
|
||||
&.pi-layout__02-full-width {
|
||||
.pi-background-image__animation--infinite {
|
||||
min-height: 20rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes opacityAnimation {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
25% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
75% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
177
libs/ui/src/lib/styles/common/components/_pi-list-item.scss
Normal file
177
libs/ui/src/lib/styles/common/components/_pi-list-item.scss
Normal file
@@ -0,0 +1,177 @@
|
||||
.pi-list-item {
|
||||
gap: var(--pi-spacing-medium);
|
||||
// Content
|
||||
.pi-list-item-content {
|
||||
flex: 1 1 auto;
|
||||
& > *:nth-child(n + 2) {
|
||||
margin-top: var(--pi-spacing-xxx-small);
|
||||
&:not(.pi-chip) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
& > .pi-slider {
|
||||
&.pi-slider__flex-direction--column-reverse {
|
||||
margin-top: var(--pi-spacing-x-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Is Disabled
|
||||
&.is-disabled {
|
||||
.pi-list-item-content {
|
||||
&:not(.pi-list-item-icon__right) {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Border
|
||||
&.pi-list-item__border--middle {
|
||||
.pi-list-item-content__left {
|
||||
padding-right: var(--pi-spacing-medium);
|
||||
border-right: 1px solid var(--pi-color-primary-50);
|
||||
}
|
||||
}
|
||||
|
||||
// Icon
|
||||
.pi-list-item-icon {
|
||||
flex: 0 0 auto;
|
||||
&.pi-list-item-icon__left {
|
||||
text-align: left;
|
||||
}
|
||||
&.pi-list-item-icon__right {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
// Mobile
|
||||
&.is-mobile {
|
||||
.pi-list-item {
|
||||
// Is Responsive
|
||||
&.is-responsive {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
// Content
|
||||
.pi-list-item-content {
|
||||
&.pi-wrapper__flex {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
// Icon
|
||||
.pi-list-item-icon {
|
||||
&.pi-list-item-icon__right {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 3.375rem;
|
||||
width: -webkit-fill-available;
|
||||
text-align: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pi-panel {
|
||||
.pi-list-item {
|
||||
// Is Responsive
|
||||
&.is-responsive {
|
||||
align-items: center;
|
||||
// Type Action
|
||||
&.is-stroked {
|
||||
border: 1px solid;
|
||||
border-color: var(--pi-color-grey-75);
|
||||
border-radius: var(--pi-border-radius-large);
|
||||
padding: unset;
|
||||
// Content
|
||||
.pi-list-item-content {
|
||||
padding: var(--pi-spacing-large);
|
||||
}
|
||||
// Icon
|
||||
.pi-list-item-icon {
|
||||
&.pi-list-item-icon__right {
|
||||
background-color: var(--pi-color-primary-25);
|
||||
border-top: 1px solid var(--pi-color-primary-50);
|
||||
border-bottom-left-radius: calc(var(--pi-border-radius-large) - 1px);
|
||||
border-bottom-right-radius: calc(var(--pi-border-radius-large) - 1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Tablet
|
||||
&.is-tablet {
|
||||
}
|
||||
// Mobile & Tablet
|
||||
&:not(.is-desktop) {
|
||||
// Small device
|
||||
@media screen and (max-width: 62rem) {
|
||||
}
|
||||
}
|
||||
// Tablet & Desktop
|
||||
&:not(.is-mobile) {
|
||||
.pi-panel {
|
||||
.pi-list-item {
|
||||
// Responsive
|
||||
&.is-responsive {
|
||||
// Icon
|
||||
.pi-list-item-icon {
|
||||
&.pi-list-item-icon__right {
|
||||
& > :not(.pi-icon-button) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 3.4375rem;
|
||||
width: 3.4375rem;
|
||||
margin-left: var(--pi-spacing-xxxx-large);
|
||||
border: 1px solid var(--pi-color-primary-50);
|
||||
border-radius: var(--pi-border-radius-large);
|
||||
transition: var(--pi-animation);
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: var(--pi-color-primary-25);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Max width
|
||||
// Half
|
||||
&.pi-list-item__max-width--half {
|
||||
.pi-list-item-content {
|
||||
&.pi-list-item-content__left {
|
||||
max-width: calc(50% - var(--pi-spacing-xxx-large));
|
||||
}
|
||||
}
|
||||
}
|
||||
// Third
|
||||
&.pi-list-item__max-width--third {
|
||||
.pi-list-item-content {
|
||||
&.pi-list-item-content__left {
|
||||
max-width: calc(33.3% - var(--pi-spacing-xxx-large));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Large device
|
||||
@media screen and (min-width: 62rem) {
|
||||
.pi-panel__expansion {
|
||||
.pi-list-item {
|
||||
gap: var(--pi-spacing-x-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pi-text-viewer {
|
||||
article {
|
||||
label,
|
||||
span {
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
116
libs/ui/src/lib/styles/common/components/_pi-note.scss
Normal file
116
libs/ui/src/lib/styles/common/components/_pi-note.scss
Normal file
@@ -0,0 +1,116 @@
|
||||
@mixin fixedBottomNote(
|
||||
$left: 0,
|
||||
$bottom: calc(var(--pi-height-footer) - var(--pi-spacing-large) + env(safe-area-inset-bottom)),
|
||||
$width: calc(100% - var(--pi-spacing-medium) - var(--pi-spacing-medium)),
|
||||
$min-width: auto
|
||||
) {
|
||||
.pi-shell {
|
||||
&.pi-shell__deale-saas {
|
||||
& > div {
|
||||
&.has-bottom-sticky-note {
|
||||
& > section {
|
||||
& > main {
|
||||
& > footer {
|
||||
position: fixed;
|
||||
left: $left;
|
||||
bottom: $bottom;
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.pi-note {
|
||||
&.is-sticky {
|
||||
&.pi-note__position--bottom {
|
||||
width: $width;
|
||||
min-width: $min-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
// Mobile
|
||||
&.is-mobile {
|
||||
@include fixedBottomNote;
|
||||
.pi-note-content__action {
|
||||
button {
|
||||
&.pi-button__icon--single {
|
||||
height: 1.75rem;
|
||||
width: 1.75rem;
|
||||
}
|
||||
}
|
||||
button {
|
||||
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-close-button):not(.pi-hamburger):not(
|
||||
.pi-button__xx-small
|
||||
):not(.pi-button__x-large):not(.pi-button__toggle) {
|
||||
height: var(--pi-spacing-xx-large);
|
||||
padding-top: unset;
|
||||
padding-bottom: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Note in panel
|
||||
.pi-panel {
|
||||
&.pi-panel__expansion--type-form {
|
||||
.pi-note {
|
||||
&.pi-note__status--error {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mat-icon {
|
||||
height: var(--pi-spacing-xx-large);
|
||||
width: 3.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Tablet
|
||||
&.is-tablet {
|
||||
&.is-tablet__small {
|
||||
@include fixedBottomNote(
|
||||
0,
|
||||
calc(env(safe-area-inset-bottom) + var(--pi-height-footer) - var(--pi-spacing-x-large)),
|
||||
calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large))
|
||||
);
|
||||
}
|
||||
&.is-tablet__large {
|
||||
@include fixedBottomNote(0, var(--pi-spacing-x-large), auto);
|
||||
}
|
||||
}
|
||||
// Tablet & Desktop
|
||||
&:not(.is-mobile) {
|
||||
.pi-note-content__action {
|
||||
button {
|
||||
&.pi-button__icon--single {
|
||||
height: var(--pi-spacing-xx-large);
|
||||
width: var(--pi-spacing-xx-large);
|
||||
}
|
||||
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single):not(
|
||||
.pi-button__xx-small
|
||||
):not(.pi-button__trimmed):not(.pi-button__toggle) {
|
||||
min-width: unset;
|
||||
padding-left: var(--pi-spacing-small);
|
||||
padding-right: var(--pi-spacing-small);
|
||||
}
|
||||
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-close-button):not(.pi-hamburger):not(
|
||||
.pi-button__xx-small
|
||||
):not(.pi-button__x-large):not(.pi-button__toggle) {
|
||||
height: var(--pi-spacing-xx-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-desktop {
|
||||
@include fixedBottomNote(0, var(--pi-spacing-x-large), auto, 25%);
|
||||
}
|
||||
}
|
||||
465
libs/ui/src/lib/styles/common/components/_pi-panel.scss
Normal file
465
libs/ui/src/lib/styles/common/components/_pi-panel.scss
Normal file
@@ -0,0 +1,465 @@
|
||||
@mixin panelInnerPadding($padding: unset) {
|
||||
&.pi-panel__inner-padding {
|
||||
padding: unset;
|
||||
|
||||
&.pi-panel__flex-direction--row {
|
||||
& > section {
|
||||
& > * {
|
||||
padding-top: var(--pi-spacing-#{$padding});
|
||||
padding-bottom: var(--pi-spacing-#{$padding});
|
||||
padding-left: var(--pi-spacing-#{$padding});
|
||||
padding-right: var(--pi-spacing-#{$padding});
|
||||
&:first-child {
|
||||
border-radius: var(--pi-border-radius-large) 0 0 var(--pi-border-radius-large);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 var(--pi-border-radius-large) var(--pi-border-radius-large) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.pi-panel__flex-direction--column {
|
||||
& > section {
|
||||
& > * {
|
||||
padding-left: var(--pi-spacing-#{$padding});
|
||||
padding-right: var(--pi-spacing-#{$padding});
|
||||
|
||||
&:first-child {
|
||||
padding-top: var(--pi-spacing-#{$padding});
|
||||
border-radius: var(--pi-border-radius-large) var(--pi-border-radius-large) 0 0;
|
||||
}
|
||||
&:last-child {
|
||||
padding-bottom: var(--pi-spacing-#{$padding});
|
||||
border-radius: 0 0 var(--pi-border-radius-large) var(--pi-border-radius-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin panelContentInnerPadding($padding) {
|
||||
& > *:nth-child(n + 1) {
|
||||
padding: var(--pi-spacing-#{$padding});
|
||||
}
|
||||
}
|
||||
|
||||
@mixin panelContentColor($color) {
|
||||
// Mode light
|
||||
&.pi-color__mode--light {
|
||||
// Light Opaque
|
||||
&:not([class*='pi-color__opacity']):not([class*='pi-color__density']) {
|
||||
// Solid light color
|
||||
background-color: var(--pi-color-#{$color}-25);
|
||||
}
|
||||
}
|
||||
// Mode dark
|
||||
&.pi-color__mode--dark {
|
||||
// Dark Opaque
|
||||
&:not([class*='pi-color__opacity']):not([class*='pi-color__density']) {
|
||||
background-color: var(--pi-color-#{$color});
|
||||
// Solid Dark Color & Is Stroked
|
||||
&.is-stroked {
|
||||
border-color: var(--pi-color-#{$color}-900);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Density
|
||||
// 10
|
||||
&.pi-color__density--10 {
|
||||
// Solid light color 10
|
||||
background-color: var(--pi-color-#{$color}-10);
|
||||
}
|
||||
// 50
|
||||
&.pi-color__density--50 {
|
||||
// Solid light color 50
|
||||
background-color: var(--pi-color-#{$color}-50);
|
||||
}
|
||||
// 75
|
||||
&.pi-color__density--75 {
|
||||
// Solid light color 75
|
||||
background-color: var(--pi-color-#{$color}-75);
|
||||
}
|
||||
// 100
|
||||
&.pi-color__density--100 {
|
||||
// Solid light color 100
|
||||
background-color: var(--pi-color-#{$color}-100);
|
||||
}
|
||||
// 200
|
||||
&.pi-color__density--200 {
|
||||
// Solid light color 200
|
||||
background-color: var(--pi-color-#{$color}-200);
|
||||
}
|
||||
// 300
|
||||
&.pi-color__density--300 {
|
||||
// Solid light color 300
|
||||
background-color: var(--pi-color-#{$color}-300);
|
||||
}
|
||||
// 400
|
||||
&.pi-color__density--400 {
|
||||
// Solid light color 400
|
||||
background-color: var(--pi-color-#{$color}-400);
|
||||
}
|
||||
// 900
|
||||
&.pi-color__density--900 {
|
||||
// Solid light color 900
|
||||
background-color: var(--pi-color-#{$color}-900);
|
||||
}
|
||||
}
|
||||
|
||||
// Panel
|
||||
.pi-panel {
|
||||
& > section {
|
||||
& > *:not(.pi-button):not(.pi-panel-content):not(.pi-chip) {
|
||||
&:nth-child(n + 2) {
|
||||
width: 100%;
|
||||
& > .pi-text-viewer__flex-direction--row + .pi-text-viewer__flex-direction--row {
|
||||
margin-top: var(--pi-spacing-xx-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
.pi-panel-content__left,
|
||||
.pi-panel-content__right {
|
||||
flex: 1 1 auto;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
&.is-disabled {
|
||||
& > *:nth-child(n + 1) {
|
||||
opacity: 0.33;
|
||||
.pi-icon__animation--clickable {
|
||||
&:hover {
|
||||
cursor: unset;
|
||||
.mat-icon {
|
||||
transform: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Glass
|
||||
&[class*='pi-color__opacity'] {
|
||||
-webkit-backdrop-filter: blur(0.75rem);
|
||||
backdrop-filter: blur(0.75rem);
|
||||
}
|
||||
// Expansion
|
||||
&.pi-panel__expansion {
|
||||
.pi-panel-content {
|
||||
&.pi-panel-content__top {
|
||||
margin-top: -0.2rem;
|
||||
}
|
||||
// Center
|
||||
&.pi-panel-content__center,
|
||||
&.pi-panel-content__expandable {
|
||||
& > *:nth-child(n + 2) {
|
||||
margin-top: var(--pi-spacing-x-large);
|
||||
}
|
||||
.pi-note + .pi-note {
|
||||
margin-top: var(--pi-spacing-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// NOT Expansion
|
||||
&:not(.pi-panel__expansion) {
|
||||
// Panel flex direction column
|
||||
&.pi-panel__flex-direction--column {
|
||||
& > section {
|
||||
& > header {
|
||||
width: -webkit-fill-available;
|
||||
}
|
||||
}
|
||||
// Panel space between
|
||||
&.pi-panel__justify--space-between {
|
||||
& > section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.pi-panel-content {
|
||||
// Center
|
||||
&.pi-panel-content__center {
|
||||
display: flex;
|
||||
& > *:nth-child(n + 1) {
|
||||
margin-top: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Inner padding
|
||||
// XS
|
||||
&.pi-panel__inner-padding--xxs {
|
||||
@include panelInnerPadding(xx-small);
|
||||
}
|
||||
// XS
|
||||
&.pi-panel__inner-padding--xs {
|
||||
@include panelInnerPadding(x-small);
|
||||
}
|
||||
// S
|
||||
&.pi-panel__inner-padding--s {
|
||||
@include panelInnerPadding(small);
|
||||
}
|
||||
// M
|
||||
&.pi-panel__inner-padding--m {
|
||||
@include panelInnerPadding(medium);
|
||||
}
|
||||
// L
|
||||
&.pi-panel__inner-padding--l {
|
||||
@include panelInnerPadding(large);
|
||||
}
|
||||
// XL
|
||||
&.pi-panel__inner-padding--xl {
|
||||
@include panelInnerPadding(x-large);
|
||||
}
|
||||
// XXL
|
||||
&.pi-panel__inner-padding--xxl {
|
||||
@include panelInnerPadding(xx-large);
|
||||
}
|
||||
// XXXL
|
||||
&.pi-panel__inner-padding--xxxl {
|
||||
@include panelInnerPadding(xxx-large);
|
||||
}
|
||||
// XXXXL
|
||||
&.pi-panel__inner-padding--xxxxl {
|
||||
@include panelInnerPadding(xxxx-large);
|
||||
}
|
||||
}
|
||||
|
||||
// Content
|
||||
.pi-panel-content {
|
||||
display: block;
|
||||
width: -webkit-fill-available;
|
||||
|
||||
& > .pi-wrapper {
|
||||
width: -webkit-fill-available;
|
||||
}
|
||||
|
||||
// Top
|
||||
&.pi-panel-content__top {
|
||||
.pi-list-item {
|
||||
.pi-list-item-icon__left {
|
||||
.pi-chip {
|
||||
&:not(.pi-chip__single-icon) {
|
||||
width: var(--pi-spacing-xxxx-large);
|
||||
min-width: unset;
|
||||
max-width: unset;
|
||||
padding: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Content Color
|
||||
// Primary
|
||||
&.pi-color__primary {
|
||||
@include panelContentColor(primary);
|
||||
}
|
||||
// Accent
|
||||
&.pi-color__accent {
|
||||
@include panelContentColor(accent);
|
||||
}
|
||||
// Highlighted
|
||||
&.pi-color__highlighted {
|
||||
@include panelContentColor(highlighted);
|
||||
}
|
||||
// Grey
|
||||
&.pi-color__grey {
|
||||
@include panelContentColor(grey);
|
||||
}
|
||||
|
||||
// Content Padding
|
||||
&.pi-panel-content__inner-padding--xxxs {
|
||||
@include panelContentInnerPadding(xxx-small);
|
||||
}
|
||||
&.pi-panel-content__inner-padding--xxs {
|
||||
@include panelContentInnerPadding(xx-small);
|
||||
}
|
||||
&.pi-panel-content__inner-padding--xs {
|
||||
@include panelContentInnerPadding(x-small);
|
||||
}
|
||||
|
||||
&.pi-panel-content__inner-padding--s {
|
||||
@include panelContentInnerPadding(small);
|
||||
}
|
||||
|
||||
&.pi-panel-content__inner-padding--m {
|
||||
@include panelContentInnerPadding(medium);
|
||||
}
|
||||
|
||||
&.pi-panel-content__inner-padding--l {
|
||||
@include panelContentInnerPadding(large);
|
||||
}
|
||||
|
||||
&.pi-panel-content__inner-padding--xl {
|
||||
@include panelContentInnerPadding(x-large);
|
||||
}
|
||||
|
||||
&.pi-panel-content__inner-padding--xxl {
|
||||
@include panelContentInnerPadding(xx-large);
|
||||
}
|
||||
|
||||
&.pi-panel-content__inner-padding--xxxl {
|
||||
@include panelContentInnerPadding(xxxl-large);
|
||||
}
|
||||
|
||||
&.pi-panel-content__inner-padding--xxxxl {
|
||||
@include panelContentInnerPadding(xxxx-large);
|
||||
}
|
||||
}
|
||||
|
||||
.pi-layout__05-splitted {
|
||||
// Not paywall
|
||||
&:not(.pi-05a-splitted-paywall-layout) {
|
||||
.pi-panel {
|
||||
&.pi-panel__is-clickable {
|
||||
&.is-active,
|
||||
&:hover {
|
||||
outline: 1px solid var(--pi-color-primary);
|
||||
}
|
||||
}
|
||||
// Padding
|
||||
&.has-padding {
|
||||
padding: var(--pi-spacing-x-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Grid
|
||||
// Half
|
||||
&.pi-panel__grid--half {
|
||||
.pi-panel-content {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
// Quarter
|
||||
&.pi-panel__grid--quarter {
|
||||
.pi-panel-content__left {
|
||||
width: 25%;
|
||||
}
|
||||
.pi-panel-content__right {
|
||||
width: 75%;
|
||||
}
|
||||
}
|
||||
// Quarter reverse
|
||||
&.pi-panel__grid--quarter-reverse {
|
||||
.pi-panel-content__left {
|
||||
width: 75%;
|
||||
}
|
||||
.pi-panel-content__right {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pi-layout__main {
|
||||
.pi-panel {
|
||||
&:not(.is-disabled) {
|
||||
box-shadow: var(--pi-box-shadow-panel);
|
||||
}
|
||||
&.is-disabled {
|
||||
box-shadow: var(--pi-box-shadow-panel-disabled);
|
||||
}
|
||||
.pi-panel {
|
||||
box-shadow: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
// Mobile
|
||||
&.is-mobile {
|
||||
// Panel
|
||||
.pi-panel {
|
||||
&.pi-panel__expansion {
|
||||
.pi-panel-content__expandable {
|
||||
button:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single):not(
|
||||
.pi-button__xx-small
|
||||
):not(.pi-button__trimmed):not(.pi-button__toggle) {
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pi-saas-panel-subtitle {
|
||||
.pi-panel-subtitle-content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Small device
|
||||
@media screen and (max-width: 62rem) {
|
||||
// Panel
|
||||
.pi-panel {
|
||||
&.pi-panel__expansion {
|
||||
.pi-panel-content__center,
|
||||
.pi-panel-content__expandable {
|
||||
margin-top: var(--pi-spacing-medium);
|
||||
}
|
||||
.pi-panel-content__top {
|
||||
.pi-list-item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: var(--pi-spacing-xx-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Tablet & Desktop
|
||||
&:not(.is-mobile) {
|
||||
// Panel
|
||||
.pi-panel {
|
||||
&.pi-panel__expansion {
|
||||
.pi-panel-content__expandable {
|
||||
button:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single):not(
|
||||
.pi-button__xx-small
|
||||
):not(.pi-button__trimmed):not(.pi-button__toggle) {
|
||||
min-width: 9.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Large device
|
||||
@media screen and (min-width: 62rem) {
|
||||
// Panel
|
||||
.pi-panel {
|
||||
&.pi-panel__expansion {
|
||||
.pi-panel-content__center,
|
||||
.pi-panel-content__expandable {
|
||||
margin-top: var(--pi-spacing-xx-large);
|
||||
}
|
||||
// Data grid in expansion panels
|
||||
.pi-data-grid {
|
||||
&.pi-data-grid__data-direction--column {
|
||||
padding-left: var(--pi-spacing-xx-small);
|
||||
padding-right: var(--pi-spacing-xx-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
.pi-panel-content {
|
||||
// Top
|
||||
&.pi-panel-content__top {
|
||||
.pi-list-item {
|
||||
.pi-list-item-icon__left {
|
||||
padding-right: var(--pi-spacing-medium);
|
||||
border-right: 1px solid var(--pi-color-primary-50);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Expandable
|
||||
&.pi-panel-content__expandable {
|
||||
.pi-list-item {
|
||||
&.pi-list-item__indent {
|
||||
padding-left: calc(5rem + 1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
22
libs/ui/src/lib/styles/common/components/_pi-spinner.scss
Normal file
22
libs/ui/src/lib/styles/common/components/_pi-spinner.scss
Normal file
@@ -0,0 +1,22 @@
|
||||
.pi-spinner {
|
||||
// Type
|
||||
// Loader
|
||||
&.pi-spinner__loader {
|
||||
display: flex !important;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: var(--pi-spacing-large);
|
||||
margin-top: unset !important;
|
||||
|
||||
&.pi-spinner__loader--fullscreen {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
background-color: var(--pi-color-primary-200-rgba);
|
||||
}
|
||||
}
|
||||
}
|
||||
22
libs/ui/src/lib/styles/common/components/_pi-tab.scss
Normal file
22
libs/ui/src/lib/styles/common/components/_pi-tab.scss
Normal file
@@ -0,0 +1,22 @@
|
||||
.pi-tab__content {
|
||||
& > * {
|
||||
display: block;
|
||||
form {
|
||||
margin-top: var(--pi-spacing-large);
|
||||
}
|
||||
& > *:nth-child(n + 2) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pi-tab__element {
|
||||
&:not(.is-disabled) {
|
||||
&:hover {
|
||||
& > .pi-icon {
|
||||
transition: var(--pi-animation);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
// Text group
|
||||
// colors
|
||||
$color1: #799ef0;
|
||||
$color2: #99b3ec;
|
||||
$color3: #afc1ea;
|
||||
$color4: #b9c8e9;
|
||||
$color5: #dbdfe7;
|
||||
$colors: $color1, $color2, $color3, $color4, $color5;
|
||||
.pi-text-group {
|
||||
&.pi-text-group__value-indicator {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
@for $i from 1 through length($colors) {
|
||||
.pi-text-viewer {
|
||||
display: flex;
|
||||
gap: var(--pi-spacing-xx-small);
|
||||
&:nth-child(#{length($colors)}n + #{$i}) {
|
||||
&::before {
|
||||
content: '';
|
||||
margin-bottom: var(--pi-spacing-xxxx-small);
|
||||
width: var(--pi-spacing-small);
|
||||
height: var(--pi-spacing-small);
|
||||
background-color: nth($colors, $i);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pi-text-viewer + .pi-text-viewer {
|
||||
margin-top: var(--pi-spacing-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
517
libs/ui/src/lib/styles/common/components/_pi-text.scss
Normal file
517
libs/ui/src/lib/styles/common/components/_pi-text.scss
Normal file
@@ -0,0 +1,517 @@
|
||||
@mixin fontSize($font-size) {
|
||||
font: {
|
||||
size: var(--pi-font-size-#{$font-size});
|
||||
}
|
||||
}
|
||||
|
||||
.pi-text__centered {
|
||||
&:is(h1, h2, h3, h4, h5, span, p, i, figcaption, label, small, legend) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
& > *:nth-child(n + 1) {
|
||||
&:is(h1, h2, h3, h4, h5, p, i, figcaption, label, small, legend) {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
&:is(h1) {
|
||||
line-height: 116.5%;
|
||||
font: {
|
||||
weight: 700;
|
||||
}
|
||||
}
|
||||
&:is(h2) {
|
||||
line-height: 125%;
|
||||
}
|
||||
&:is(h3, h4, h5) {
|
||||
line-height: 130%;
|
||||
}
|
||||
& > *:nth-child(n + 1) {
|
||||
&:is(h1) {
|
||||
line-height: 116.5%;
|
||||
}
|
||||
&:is(h2) {
|
||||
line-height: 125%;
|
||||
}
|
||||
}
|
||||
& > *:nth-child(n + 1) {
|
||||
&:is(h3, h4, h5) {
|
||||
line-height: 130%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pi-text__is-covered {
|
||||
&:is(h1, h2, h3, h4, h5, span, p, i, figcaption, label, small, legend) {
|
||||
position: relative;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--pi-color-grey-75);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
border-radius: var(--pi-border-radius-xx-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pi-text__group {
|
||||
& > * + * {
|
||||
margin-left: var(--pi-spacing-xxx-small);
|
||||
}
|
||||
}
|
||||
|
||||
.pi-shell__deale-saas {
|
||||
h3 {
|
||||
font: {
|
||||
size: var(--pi-font-size-medium);
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
font: {
|
||||
size: var(--pi-font-size-small);
|
||||
}
|
||||
}
|
||||
h5 {
|
||||
font: {
|
||||
size: var(--pi-font-size-small);
|
||||
}
|
||||
}
|
||||
p {
|
||||
font: {
|
||||
size: var(--pi-font-size-small);
|
||||
}
|
||||
}
|
||||
figcaption {
|
||||
font: {
|
||||
size: var(--pi-font-size-small);
|
||||
}
|
||||
}
|
||||
strong {
|
||||
font-family: 'Soehne', Helvetica, Arial, sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
i {
|
||||
font: {
|
||||
size: var(--pi-font-size-small);
|
||||
}
|
||||
}
|
||||
label {
|
||||
font: {
|
||||
size: var(--pi-font-size-small);
|
||||
}
|
||||
}
|
||||
|
||||
small {
|
||||
font: {
|
||||
size: var(--pi-font-size-xx-small);
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile
|
||||
@media screen and (max-width: 40rem) {
|
||||
h1 {
|
||||
font: {
|
||||
size: var(--pi-font-size-x-large);
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font: {
|
||||
size: var(--pi-font-size-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Tablet & Desktop
|
||||
@media screen and (min-width: 40rem) {
|
||||
h1 {
|
||||
font: {
|
||||
size: var(--pi-font-size-x-large);
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font: {
|
||||
size: var(--pi-font-size-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
mark {
|
||||
all: unset;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
height: 0.2rem;
|
||||
width: 100%;
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
&.pi-color__primary {
|
||||
&:after {
|
||||
background: var(--pi-color-primary);
|
||||
}
|
||||
}
|
||||
&.pi-color__accent,
|
||||
&:not(.pi-color__primary):not(.pi-color__warn) {
|
||||
&:after {
|
||||
background: var(--pi-color-accent);
|
||||
}
|
||||
}
|
||||
&.pi-color__warn {
|
||||
&:after {
|
||||
background: var(--pi-color-warn);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin textColor($color) {
|
||||
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-#{$color});
|
||||
}
|
||||
&:not(button):not([class*='content'])
|
||||
> *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-#{$color});
|
||||
}
|
||||
// (50)
|
||||
&.pi-color__density--50 {
|
||||
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-#{$color}-50);
|
||||
}
|
||||
&:not(button):not([class*='content'])
|
||||
> *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-#{$color}-50);
|
||||
}
|
||||
}
|
||||
// (100)
|
||||
&.pi-color__density--100 {
|
||||
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-#{$color}-100);
|
||||
}
|
||||
&:not(button):not([class*='content'])
|
||||
> *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-#{$color}-100);
|
||||
}
|
||||
}
|
||||
// (200)
|
||||
&.pi-color__density--200 {
|
||||
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-#{$color}-200);
|
||||
}
|
||||
&:not(button):not([class*='content'])
|
||||
> *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-#{$color}-200);
|
||||
}
|
||||
}
|
||||
// (300)
|
||||
&.pi-color__density--300 {
|
||||
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-#{$color}-300);
|
||||
}
|
||||
&:not(button):not([class*='content'])
|
||||
> *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-#{$color}-300);
|
||||
}
|
||||
}
|
||||
// (400)
|
||||
&.pi-color__density--400 {
|
||||
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-#{$color}-400);
|
||||
}
|
||||
&:not(button):not([class*='content'])
|
||||
> *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-#{$color}-400);
|
||||
}
|
||||
}
|
||||
// (900)
|
||||
&.pi-color__density--900 {
|
||||
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-#{$color}-900);
|
||||
}
|
||||
&:not(button):not([class*='content'])
|
||||
> *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-#{$color}-900);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Primary
|
||||
.pi-color__primary {
|
||||
@include textColor(primary);
|
||||
}
|
||||
|
||||
// Accent
|
||||
.pi-color__accent {
|
||||
@include textColor(accent);
|
||||
}
|
||||
|
||||
// Warn
|
||||
.pi-color__warn {
|
||||
@include textColor(warn);
|
||||
}
|
||||
|
||||
// Success
|
||||
.pi-color__success {
|
||||
@include textColor(success);
|
||||
}
|
||||
|
||||
// Highlighted
|
||||
.pi-color__highlighted {
|
||||
@include textColor(highlighted);
|
||||
}
|
||||
|
||||
// Grey
|
||||
.pi-color__grey {
|
||||
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-grey);
|
||||
}
|
||||
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-grey);
|
||||
}
|
||||
// Grey (50)
|
||||
&.pi-color__density--50 {
|
||||
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-grey-75);
|
||||
}
|
||||
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-grey-75);
|
||||
}
|
||||
}
|
||||
// Grey (100)
|
||||
&.pi-color__density--100 {
|
||||
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-grey-100);
|
||||
}
|
||||
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-grey-100);
|
||||
}
|
||||
}
|
||||
// Grey (200)
|
||||
&.pi-color__density--200 {
|
||||
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-grey-200);
|
||||
}
|
||||
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-grey-200);
|
||||
}
|
||||
}
|
||||
// Grey (300)
|
||||
&.pi-color__density--300 {
|
||||
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-grey-300);
|
||||
}
|
||||
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-grey-300);
|
||||
}
|
||||
}
|
||||
// Grey (400)
|
||||
&.pi-color__density--400 {
|
||||
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-grey-300);
|
||||
}
|
||||
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-grey-300);
|
||||
}
|
||||
}
|
||||
// Grey (900)
|
||||
&.pi-color__density--900 {
|
||||
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-grey-900);
|
||||
}
|
||||
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-grey-900);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// White
|
||||
.pi-color__white {
|
||||
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-white);
|
||||
}
|
||||
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-white);
|
||||
}
|
||||
// White (200)
|
||||
&.pi-color__density--200 {
|
||||
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-white-rgba-06);
|
||||
}
|
||||
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-white-rgba-06);
|
||||
}
|
||||
}
|
||||
// White (900)
|
||||
&.pi-color__density--900 {
|
||||
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-white);
|
||||
}
|
||||
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Black
|
||||
.pi-color__black {
|
||||
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-grey-900);
|
||||
}
|
||||
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-grey-900);
|
||||
}
|
||||
// Black (200)
|
||||
&.pi-color__density--200 {
|
||||
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-grey-900);
|
||||
}
|
||||
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-grey-900);
|
||||
}
|
||||
}
|
||||
// Black (900)
|
||||
&.pi-color__density--900 {
|
||||
&:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-grey-900);
|
||||
}
|
||||
&:not(button) > *:is(h1, h2, h3, h4, h5, p, span, i, strong, label, figcaption, legend, small) {
|
||||
color: var(--pi-color-grey-900);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Blockquote
|
||||
blockquote {
|
||||
display: flex;
|
||||
// Mobile
|
||||
@media screen and (max-width: 40rem) {
|
||||
gap: var(--pi-spacing-xx-small);
|
||||
}
|
||||
// Tablet & Desktop
|
||||
@media screen and (min-width: 40rem) {
|
||||
gap: var(--pi-spacing-x-large);
|
||||
}
|
||||
&::before {
|
||||
content: open-quote;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: close-quote;
|
||||
}
|
||||
&::before,
|
||||
&::after {
|
||||
position: relative;
|
||||
margin-top: -1rem;
|
||||
font: {
|
||||
size: 300%;
|
||||
}
|
||||
}
|
||||
// Primary
|
||||
&.pi-color__primary {
|
||||
&::before,
|
||||
&::after {
|
||||
color: var(--pi-color-primary);
|
||||
}
|
||||
}
|
||||
// Accent
|
||||
&.pi-color__accent {
|
||||
&::before,
|
||||
&::after {
|
||||
color: var(--pi-color-accent);
|
||||
}
|
||||
}
|
||||
// Warn
|
||||
&.pi-color-warn {
|
||||
&::before,
|
||||
&::after {
|
||||
color: var(--pi-color-warn);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pi-text {
|
||||
// xxs - 0.625rem - 10px
|
||||
&.pi-text__size--xx-small {
|
||||
@include fontSize(xx-small);
|
||||
}
|
||||
// xs - 0.75rem - 12px
|
||||
&.pi-text__size--x-small {
|
||||
@include fontSize(x-small);
|
||||
}
|
||||
// s - 0.9375rem - 15px
|
||||
&.pi-text__size--small {
|
||||
@include fontSize(small);
|
||||
}
|
||||
// m - 1.125rem - 18px
|
||||
&.pi-text__size--medium {
|
||||
@include fontSize(medium);
|
||||
}
|
||||
// l - 1.375rem - 22px
|
||||
&.pi-text__size--large {
|
||||
@include fontSize(large);
|
||||
}
|
||||
// xl - 1.6875rem - 27px
|
||||
&.pi-text__size--x-large {
|
||||
@include fontSize(x-large);
|
||||
}
|
||||
// xxl - 2.375rem - 38px
|
||||
&.pi-text__size--xx-large {
|
||||
@include fontSize(xx-large);
|
||||
}
|
||||
// xxxl - 2.875rem - 46px
|
||||
&.pi-text__size--xxx-large {
|
||||
@include fontSize(xxx-large);
|
||||
}
|
||||
}
|
||||
|
||||
// Form field labels
|
||||
.pi-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--pi-spacing-xxx-small);
|
||||
}
|
||||
|
||||
@mixin textCenteredMaxWidth($max-width) {
|
||||
.pi-domain-component {
|
||||
.pi-text__centered {
|
||||
&:not(.pi-text__size--x-small) {
|
||||
max-width: $max-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
&.is-desktop {
|
||||
.pi-domain-component {
|
||||
.pi-text__centered {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.is-desktop__small {
|
||||
@include textCenteredMaxWidth(80%);
|
||||
}
|
||||
&.is-desktop__medium {
|
||||
@include textCenteredMaxWidth(75%);
|
||||
}
|
||||
&.is-desktop__large {
|
||||
@include textCenteredMaxWidth(66.66%);
|
||||
}
|
||||
}
|
||||
|
||||
.pi-text__letter-spacing {
|
||||
letter-spacing: var(--pi-spacing-xx-small);
|
||||
}
|
||||
15
libs/ui/src/lib/styles/common/components/index.scss
Normal file
15
libs/ui/src/lib/styles/common/components/index.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
@forward 'pi-accordion';
|
||||
@forward 'pi-card';
|
||||
@forward 'pi-divider';
|
||||
@forward 'pi-headline';
|
||||
@forward 'pi-list-item';
|
||||
@forward 'pi-note';
|
||||
@forward 'pi-panel';
|
||||
@forward 'pi-spinner';
|
||||
@forward 'pi-tab';
|
||||
@forward 'pi-text-viewer';
|
||||
@forward 'pi-text';
|
||||
|
||||
@use 'pi-button';
|
||||
@use 'pi-data-grid';
|
||||
@use 'pi-field';
|
||||
@@ -0,0 +1,284 @@
|
||||
@mixin privateButtonsSizes {
|
||||
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__xx-small):not(.pi-button__x-large):not(
|
||||
.pi-button__toggle
|
||||
):not(.pi-button__trimmed):not(.ch2-btn):not(.pi-button__icon--single) {
|
||||
&:not(.pi-button__x-small):not(.pi-button__xx-small) {
|
||||
height: var(--pi-spacing-xxx-large);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__toggle):not(.pi-button__trimmed):not(
|
||||
.ch2-btn
|
||||
):not(.pi-button__icon--single) {
|
||||
&.pi-button__x-small {
|
||||
height: var(--pi-spacing-xx-large);
|
||||
}
|
||||
}
|
||||
|
||||
// Default
|
||||
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
|
||||
.pi-button__type--menu-item
|
||||
) {
|
||||
// Sizes
|
||||
// X small
|
||||
&.pi-button {
|
||||
&:not(.pi-button__icon):not(.pi-button__x-small):not(.pi-button__small):not(
|
||||
.pi-button__large
|
||||
):not(.pi-button__large):not(.pi-button__trimed):not(.pi-button__xx-small):not(
|
||||
.pi-button__trimmed
|
||||
) {
|
||||
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fill
|
||||
@mixin privateButtonFillColor($color) {
|
||||
// Default color
|
||||
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(.pi-color__white) {
|
||||
background-color: var(--pi-color-#{$color});
|
||||
color: var(--pi-color-white);
|
||||
&:disabled {
|
||||
background-color: var(--pi-color-#{$color}-200);
|
||||
}
|
||||
&:hover {
|
||||
&:enabled {
|
||||
background-color: var(--pi-color-#{$color}-900);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Default color & White
|
||||
&.pi-button__white {
|
||||
color: var(--pi-color-#{$color});
|
||||
&:hover {
|
||||
&:enabled {
|
||||
background-color: var(--pi-color-#{$color});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Ghost
|
||||
@mixin privateButtonGhostColor($color) {
|
||||
color: var(--pi-color-#{$color});
|
||||
&:hover {
|
||||
&:enabled {
|
||||
color: var(--pi-color-#{$color}-900);
|
||||
}
|
||||
}
|
||||
&:disabled {
|
||||
color: var(--pi-color-#{$color}-200);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline
|
||||
@mixin privateButtonOutlineColor($color) {
|
||||
background-color: transparent;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.16s ease-in;
|
||||
border: 1px solid;
|
||||
color: var(--pi-color-#{$color});
|
||||
&:hover {
|
||||
&:enabled {
|
||||
color: var(--pi-color-white);
|
||||
border-color: var(--pi-color-#{$color});
|
||||
background-color: var(--pi-color-#{$color});
|
||||
}
|
||||
}
|
||||
&:disabled {
|
||||
color: var(--pi-color-#{$color}-200);
|
||||
}
|
||||
// Is Active
|
||||
&.is-active {
|
||||
color: var(--pi-color-white);
|
||||
border-color: var(--pi-color-#{$color});
|
||||
background-color: var(--pi-color-#{$color});
|
||||
}
|
||||
}
|
||||
|
||||
@mixin privateButtonsColors {
|
||||
// Default
|
||||
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
|
||||
.pi-button__type--menu-item
|
||||
) {
|
||||
// Color
|
||||
// White
|
||||
&.pi-color__white {
|
||||
background-color: var(--pi-color-white);
|
||||
&:disabled {
|
||||
background-color: rgba($color: white, $alpha: 0.6);
|
||||
}
|
||||
&:hover {
|
||||
color: var(--pi-color-white);
|
||||
background-color: transparent;
|
||||
border: 2px solid var(--pi-color-white);
|
||||
&:enabled {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
// White default
|
||||
&.pi-color__white:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
|
||||
.pi-color__highlighted
|
||||
):not(.pi-color__white) {
|
||||
&:not(:hover) {
|
||||
color: var(--pi-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fill
|
||||
// Primary
|
||||
&.pi-color__primary {
|
||||
@include privateButtonFillColor(primary);
|
||||
}
|
||||
// Accent
|
||||
&.pi-color__accent {
|
||||
@include privateButtonFillColor(accent);
|
||||
}
|
||||
// Warn
|
||||
&.pi-color__warn {
|
||||
@include privateButtonFillColor(warn);
|
||||
}
|
||||
|
||||
// Highlighted
|
||||
&.pi-color__highlighted {
|
||||
@include privateButtonFillColor(highlighted);
|
||||
}
|
||||
|
||||
// Ghost
|
||||
&.pi-button__appearance--ghost {
|
||||
background-color: transparent;
|
||||
text-decoration: underline;
|
||||
// Ghost & Primary
|
||||
&.pi-color__primary,
|
||||
&:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
|
||||
.pi-color__white
|
||||
):not(.pi-color__black):not(.pi-color__highlighted):not(.pi-color__grey) {
|
||||
@include privateButtonGhostColor(primary);
|
||||
}
|
||||
// Ghost & Accent
|
||||
&.pi-color__accent {
|
||||
@include privateButtonGhostColor(accent);
|
||||
}
|
||||
// Ghost & Warn
|
||||
&.pi-color__warn {
|
||||
@include privateButtonGhostColor(warn);
|
||||
}
|
||||
// Ghost & Highlighted
|
||||
&.pi-color__highlighted {
|
||||
@include privateButtonGhostColor(Highlighted);
|
||||
}
|
||||
// Ghost & White
|
||||
&.pi-color__white {
|
||||
color: var(--pi-color-white);
|
||||
&:hover {
|
||||
border: unset;
|
||||
&:enabled {
|
||||
color: var(--pi-color-white);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
&:disabled {
|
||||
color: rgba($color: white, $alpha: 0.6);
|
||||
}
|
||||
}
|
||||
// Ghost & Black
|
||||
&.pi-color__black {
|
||||
color: var(--pi-color-grey-900);
|
||||
&:hover {
|
||||
&:enabled {
|
||||
color: var(--pi-color-grey-900);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
&:disabled {
|
||||
color: rgba($color: #3d3d3d, $alpha: 0.6);
|
||||
}
|
||||
}
|
||||
// Ghost & Grey
|
||||
&.pi-color__grey {
|
||||
color: var(--pi-color-grey-300);
|
||||
&:hover {
|
||||
&:enabled {
|
||||
color: var(--pi-color-grey-400);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
&:disabled {
|
||||
color: var(--pi-color-grey-100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Outline
|
||||
&.pi-button__appearance--outline {
|
||||
// Outline & Primary
|
||||
&.pi-color__primary,
|
||||
&:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
|
||||
.pi-color__white
|
||||
):not(.pi-color__highlighted):not(.pi-color__black) {
|
||||
@include privateButtonOutlineColor(primary);
|
||||
}
|
||||
// Outline & Accent
|
||||
&.pi-color__accent {
|
||||
@include privateButtonOutlineColor(accent);
|
||||
}
|
||||
// Outline & Warn
|
||||
&.pi-color__warn {
|
||||
@include privateButtonOutlineColor(warn);
|
||||
}
|
||||
|
||||
// Outline & Highlighted
|
||||
&.pi-color__highlighted {
|
||||
@include privateButtonOutlineColor(highlighted);
|
||||
}
|
||||
|
||||
&.pi-color__black {
|
||||
@include privateButtonOutlineColor(grey);
|
||||
}
|
||||
// Outline & White
|
||||
&.pi-color__white {
|
||||
color: var(--pi-color-white);
|
||||
&:hover {
|
||||
&:enabled {
|
||||
color: var(--pi-color-primary);
|
||||
background-color: var(--pi-color-white);
|
||||
border-color: var(--pi-color-white);
|
||||
}
|
||||
}
|
||||
&:disabled {
|
||||
color: rgba($color: #ffffff, $alpha: 0.6);
|
||||
}
|
||||
// Is Active
|
||||
&.is-active {
|
||||
color: var(--pi-color-primary);
|
||||
background-color: var(--pi-color-white);
|
||||
border-color: var(--pi-color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pi-shell {
|
||||
&.pi-shell__deale-saas {
|
||||
.is-private {
|
||||
button {
|
||||
// Colors
|
||||
@include privateButtonsColors;
|
||||
// Sizes
|
||||
@include privateButtonsSizes;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cdk-overlay-container {
|
||||
button {
|
||||
// Colors
|
||||
@include privateButtonsColors;
|
||||
// Sizes
|
||||
@include privateButtonsSizes;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,737 @@
|
||||
@mixin publicGhostButtonsColors(
|
||||
$background-image: linear-gradient(30deg, var(--pi-color-primary), var(--pi-color-primary-900)),
|
||||
$color: primary
|
||||
) {
|
||||
color: var(--pi-color-#{$color});
|
||||
background-image: $background-image;
|
||||
&:hover {
|
||||
&:enabled {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin publicButtonsBackgroundColors(
|
||||
$color-disabled: var(--pi-color-primary-200),
|
||||
$color-enabled: var(--pi-color-primary-900)
|
||||
) {
|
||||
background-size: 100%;
|
||||
background-repeat: repeat;
|
||||
color: var(--pi-color-white);
|
||||
&:disabled {
|
||||
background-color: $color-disabled;
|
||||
}
|
||||
&:hover {
|
||||
&:enabled {
|
||||
background-color: $color-enabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin publicFillButtonsGradients($color) {
|
||||
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(.pi-color__white) {
|
||||
background-size: 100%;
|
||||
background-repeat: repeat;
|
||||
color: var(--pi-color-white);
|
||||
// Light
|
||||
&.pi-color__mode--light {
|
||||
&:not(:disabled) {
|
||||
background-image: var(--pi-gradient-#{$color}-light);
|
||||
}
|
||||
&:disabled {
|
||||
color: var(--pi-color-grey-200);
|
||||
background-image: var(--pi-gradient-light-disabled);
|
||||
}
|
||||
}
|
||||
// Dark
|
||||
&:not(.pi-color__mode--light) {
|
||||
&:not(:disabled) {
|
||||
background-image: var(--pi-gradient-#{$color}-dark);
|
||||
}
|
||||
&:disabled {
|
||||
background-image: var(--pi-gradient-dark-disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Primary & White
|
||||
&.pi-button__white {
|
||||
color: var(--pi-color-#{$color});
|
||||
&:hover {
|
||||
&:enabled {
|
||||
background-color: var(--pi-color-#{$color});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sizes
|
||||
@mixin publicButtonsSizes {
|
||||
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__xx-small):not(.pi-button__x-large):not(
|
||||
.pi-button__toggle
|
||||
):not(.pi-button__trimmed):not(.ch2-btn):not(.pi-button__icon--single):not(
|
||||
.pi-button__type--menu-item
|
||||
) {
|
||||
height: 2.875rem;
|
||||
&.pi-button__icon--single {
|
||||
width: var(--pi-spacing-xxxx-large);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.pi-button__toggle):not(.pi-button__x-large):not(.pi-button__trimmed):not(
|
||||
.pi-button__type--menu-item
|
||||
) {
|
||||
height: 2.875rem;
|
||||
&.pi-button__icon--single {
|
||||
width: var(--pi-spacing-xxxx-large);
|
||||
}
|
||||
}
|
||||
// Default
|
||||
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
|
||||
.pi-button__type--menu-item
|
||||
) {
|
||||
// Sizes
|
||||
// X small
|
||||
&.pi-button {
|
||||
&:not(.pi-button__icon--single):not(.pi-button__x-small):not(.pi-button__small):not(
|
||||
.pi-button__large
|
||||
):not(.pi-button__trimed):not(.pi-button__xx-small):not(.pi-button__trimmed) {
|
||||
min-height: 2.875rem;
|
||||
}
|
||||
&:not(.pi-button__icon):not(.pi-button__x-small):not(.pi-button__small):not(
|
||||
.pi-button__large
|
||||
):not(.pi-button__large):not(.pi-button__trimed):not(.pi-button__xx-small):not(
|
||||
.pi-button__trimmed
|
||||
) {
|
||||
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Shine hover effect
|
||||
@mixin publicButtonsShineHoverEffect {
|
||||
// Hover shine effect
|
||||
&:not(.pi-button__appearance--ghost):not(.pi-button__type--menu-item):not(.pi-color__black) {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: 0;
|
||||
bottom: -50%;
|
||||
left: -50%;
|
||||
transform: rotateZ(75deg) translate(-5rem, 7.5rem);
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
&::after {
|
||||
animation: sheen 0.75s forwards;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translate(0, -0.125rem);
|
||||
}
|
||||
|
||||
// Mode Light
|
||||
&.pi-color__mode--light {
|
||||
&::after {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(229, 172, 142, 0),
|
||||
rgba(255, 255, 255, 0.25) 50%,
|
||||
rgba(229, 172, 142, 0)
|
||||
);
|
||||
}
|
||||
&:active {
|
||||
box-shadow: 0px 0px 0px white;
|
||||
-webkit-box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.25);
|
||||
-moz-box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.25);
|
||||
box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
}
|
||||
// Mode Dark
|
||||
&.pi-color__mode--dark {
|
||||
&::after {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(229, 172, 142, 0),
|
||||
rgba(255, 255, 255, 0.125) 50%,
|
||||
rgba(229, 172, 142, 0)
|
||||
);
|
||||
}
|
||||
&:active {
|
||||
box-shadow: 0px 0px 0px white;
|
||||
-webkit-box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.125);
|
||||
-moz-box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.125);
|
||||
box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.125);
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
@keyframes sheen {
|
||||
100% {
|
||||
transform: rotateZ(30deg) translate(1rem, -9rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Colors
|
||||
@mixin publicButtonsColors {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
// Shine hover effect
|
||||
&:not(:disabled) {
|
||||
@include publicButtonsShineHoverEffect;
|
||||
}
|
||||
// Default
|
||||
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
|
||||
.pi-button__type--menu-item
|
||||
) {
|
||||
font: {
|
||||
weight: 600;
|
||||
}
|
||||
// Color
|
||||
// White
|
||||
// TODO: Add customized white 25 density color gradient for backgrounds
|
||||
// TODO: Add text color gradients
|
||||
&.pi-color__white {
|
||||
background-image: var(--pi-gradient-white-rgba);
|
||||
&:disabled {
|
||||
background-color: rgba($color: white, $alpha: 0.6);
|
||||
}
|
||||
&:hover {
|
||||
color: var(--pi-color-primary-900);
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--pi-color-primary-100);
|
||||
&:enabled {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
// White default
|
||||
&.pi-color__white:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
|
||||
.pi-color__highlighted
|
||||
) {
|
||||
&:not(:hover) {
|
||||
color: var(--pi-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Primary
|
||||
&.pi-color__primary {
|
||||
@include publicFillButtonsGradients(primary);
|
||||
}
|
||||
// Accent
|
||||
&.pi-color__accent {
|
||||
@include publicFillButtonsGradients(accent);
|
||||
}
|
||||
// Highlighted
|
||||
&.pi-color__highlighted {
|
||||
@include publicFillButtonsGradients(highlighted);
|
||||
}
|
||||
|
||||
// Black
|
||||
&.pi-color__black {
|
||||
background-image: linear-gradient(
|
||||
300deg,
|
||||
hsl(0deg 0% 62%) 0%,
|
||||
hsl(344deg 0% 57%) 21%,
|
||||
hsl(344deg 0% 53%) 30%,
|
||||
hsl(344deg 0% 49%) 39%,
|
||||
hsl(344deg 0% 44%) 46%,
|
||||
hsl(344deg 0% 40%) 54%,
|
||||
hsl(344deg 0% 36%) 61%,
|
||||
hsl(344deg 0% 32%) 69%,
|
||||
hsl(344deg 0% 28%) 79%,
|
||||
hsl(0deg 0% 24%) 100%
|
||||
);
|
||||
color: var(--pi-color-white);
|
||||
&:disabled {
|
||||
background-color: rgba($color: #3d3d3d, $alpha: 0.6);
|
||||
}
|
||||
&:hover {
|
||||
&:enabled {
|
||||
background-color: var(--pi-color-black);
|
||||
}
|
||||
}
|
||||
// White default
|
||||
&.pi-color__white:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
|
||||
.pi-color__highlighted
|
||||
) {
|
||||
&:not(:hover) {
|
||||
color: var(--pi-color-black);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Warn
|
||||
&.pi-color__warn {
|
||||
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
|
||||
.pi-color__white
|
||||
) {
|
||||
@include publicButtonsBackgroundColors(var(--pi-color-warn-200), var(--pi-color-warn-900));
|
||||
}
|
||||
// Mode
|
||||
// Default
|
||||
&:not(.pi-color__mode--light) {
|
||||
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
|
||||
.pi-color__white
|
||||
) {
|
||||
background-image: linear-gradient(
|
||||
300deg,
|
||||
hsl(0deg 74% 71%) 0%,
|
||||
hsl(0deg 71% 69%) 21%,
|
||||
hsl(0deg 68% 66%) 30%,
|
||||
hsl(1deg 65% 64%) 39%,
|
||||
hsl(1deg 62% 61%) 46%,
|
||||
hsl(1deg 60% 59%) 54%,
|
||||
hsl(1deg 58% 56%) 61%,
|
||||
hsl(1deg 56% 54%) 69%,
|
||||
hsl(0deg 54% 51%) 79%,
|
||||
hsl(0deg 56% 49%) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
// Light
|
||||
&.pi-color__mode--light {
|
||||
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
|
||||
.pi-color__white
|
||||
) {
|
||||
background-image: linear-gradient(
|
||||
300deg,
|
||||
hsl(350deg 100% 93%) 0%,
|
||||
hsl(351deg 95% 91%) 21%,
|
||||
hsl(352deg 92% 89%) 30%,
|
||||
hsl(353deg 89% 86%) 39%,
|
||||
hsl(354deg 87% 84%) 46%,
|
||||
hsl(356deg 84% 82%) 54%,
|
||||
hsl(357deg 81% 79%) 61%,
|
||||
hsl(358deg 79% 77%) 69%,
|
||||
hsl(359deg 76% 74%) 79%,
|
||||
hsl(0deg 74% 71%) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
// Warn & White
|
||||
&.pi-color__white {
|
||||
&:not(:hover) {
|
||||
color: var(--pi-color-warn);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Success
|
||||
&.pi-color__success {
|
||||
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
|
||||
.pi-color__white
|
||||
) {
|
||||
@include publicButtonsBackgroundColors(
|
||||
var(--pi-color-success-200),
|
||||
var(--pi-color-success-900)
|
||||
);
|
||||
}
|
||||
// Mode
|
||||
// Default
|
||||
&:not(.pi-color__mode--light) {
|
||||
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
|
||||
.pi-color__white
|
||||
) {
|
||||
background-image: linear-gradient(
|
||||
300deg,
|
||||
hsl(155deg 48% 79%) 0%,
|
||||
hsl(154deg 45% 74%) 21%,
|
||||
hsl(153deg 43% 69%) 30%,
|
||||
hsl(152deg 42% 64%) 39%,
|
||||
hsl(151deg 40% 60%) 46%,
|
||||
hsl(151deg 39% 55%) 54%,
|
||||
hsl(150deg 39% 50%) 61%,
|
||||
hsl(150deg 48% 45%) 69%,
|
||||
hsl(151deg 61% 39%) 79%,
|
||||
hsl(155deg 100% 30%) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
// Light
|
||||
&.pi-color__mode--light {
|
||||
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
|
||||
.pi-color__white
|
||||
) {
|
||||
background-image: linear-gradient(
|
||||
300deg,
|
||||
hsl(155deg 62% 91%) 0%,
|
||||
hsl(155deg 60% 88%) 21%,
|
||||
hsl(155deg 59% 84%) 30%,
|
||||
hsl(155deg 58% 81%) 39%,
|
||||
hsl(155deg 57% 78%) 46%,
|
||||
hsl(155deg 57% 75%) 54%,
|
||||
hsl(155deg 56% 72%) 61%,
|
||||
hsl(155deg 56% 68%) 69%,
|
||||
hsl(155deg 56% 65%) 79%,
|
||||
hsl(155deg 56% 61%) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
// Highlighted & White
|
||||
&.pi-color__white {
|
||||
&:not(:hover) {
|
||||
color: var(--pi-color-success);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Ghost
|
||||
&.pi-button__appearance--ghost {
|
||||
background-color: transparent;
|
||||
text-decoration: underline;
|
||||
background-size: 100%;
|
||||
background-repeat: repeat;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
-moz-background-clip: text;
|
||||
-moz-text-fill-color: transparent;
|
||||
|
||||
// Ghost & Primary
|
||||
&.pi-color__primary,
|
||||
&:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
|
||||
.pi-color__white
|
||||
):not(.pi-color__black):not(.pi-color__highlighted):not(.pi-color__grey):not(
|
||||
.pi-color__success
|
||||
) {
|
||||
@include publicGhostButtonsColors;
|
||||
&:disabled {
|
||||
@include publicGhostButtonsColors(
|
||||
linear-gradient(30deg, var(--pi-color-primary-100), var(--pi-color-primary-200)),
|
||||
primary-200
|
||||
);
|
||||
}
|
||||
}
|
||||
// Ghost & Accent
|
||||
&.pi-color__accent {
|
||||
@include publicGhostButtonsColors(
|
||||
linear-gradient(30deg, var(--pi-color-accent), var(--pi-color-accent-900)),
|
||||
accent
|
||||
);
|
||||
&:disabled {
|
||||
@include publicGhostButtonsColors(
|
||||
linear-gradient(30deg, var(--pi-color-accent-100), var(--pi-color-accent-100)),
|
||||
accent-200
|
||||
);
|
||||
}
|
||||
}
|
||||
// Ghost & Warn
|
||||
&.pi-color__warn {
|
||||
@include publicGhostButtonsColors(
|
||||
linear-gradient(30deg, var(--pi-color-warn), var(--pi-color-warn-900)),
|
||||
warn
|
||||
);
|
||||
&:disabled {
|
||||
@include publicGhostButtonsColors(
|
||||
linear-gradient(30deg, var(--pi-color-warn-100), var(--pi-color-warn-200)),
|
||||
warn-200
|
||||
);
|
||||
}
|
||||
}
|
||||
// Ghost & White
|
||||
&.pi-color__white {
|
||||
@include publicGhostButtonsColors;
|
||||
&:disabled {
|
||||
@include publicGhostButtonsColors(
|
||||
linear-gradient(30deg, var(--pi-color-white), rgba($color: white, $alpha: 0.6)),
|
||||
white
|
||||
);
|
||||
}
|
||||
}
|
||||
// Ghost & Black
|
||||
&.pi-color__black {
|
||||
@include publicGhostButtonsColors(
|
||||
linear-gradient(30deg, var(--pi-color-black), var(--pi-color-grey-900)),
|
||||
grey
|
||||
);
|
||||
&:disabled {
|
||||
@include publicGhostButtonsColors(
|
||||
linear-gradient(30deg, var(--pi-color-black), rgba($color: #3d3d3d, $alpha: 0.6)),
|
||||
grey-200
|
||||
);
|
||||
}
|
||||
}
|
||||
// Ghost & Highlighted
|
||||
&.pi-color__highlighted {
|
||||
@include publicGhostButtonsColors(
|
||||
linear-gradient(30deg, var(--pi-color-highlighted), var(--pi-color-highlighted-900)),
|
||||
highlighted
|
||||
);
|
||||
&:disabled {
|
||||
@include publicGhostButtonsColors(
|
||||
linear-gradient(
|
||||
30deg,
|
||||
var(--pi-color-highlighted-100),
|
||||
var(--pi-color-highlighted-200)
|
||||
),
|
||||
highlighted-200
|
||||
);
|
||||
}
|
||||
}
|
||||
// Ghost & Grey
|
||||
&.pi-color__grey {
|
||||
@include publicGhostButtonsColors(
|
||||
linear-gradient(30deg, var(--pi-color-grey-100), var(--pi-color-grey-400)),
|
||||
grey-400
|
||||
);
|
||||
&:disabled {
|
||||
@include publicGhostButtonsColors(
|
||||
linear-gradient(30deg, var(--pi-color-grey-25), var(--pi-color-grey-75)),
|
||||
grey-50
|
||||
);
|
||||
}
|
||||
}
|
||||
// Ghost & Success
|
||||
&.pi-color__success {
|
||||
@include publicGhostButtonsColors(
|
||||
linear-gradient(30deg, var(--pi-color-success), var(--pi-color-success-900)),
|
||||
success
|
||||
);
|
||||
&:disabled {
|
||||
@include publicGhostButtonsColors(
|
||||
linear-gradient(30deg, var(--pi-color-success-100), var(--pi-color-success-200)),
|
||||
success-200
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Outline
|
||||
&.pi-button__appearance--outline {
|
||||
background-color: transparent;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.16s ease-in;
|
||||
border: 1px solid;
|
||||
|
||||
// Outline & Primary
|
||||
&.pi-color__primary,
|
||||
&:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
|
||||
.pi-color__white
|
||||
):not(.pi-color__highlighted) {
|
||||
color: var(--pi-color-primary);
|
||||
&:hover {
|
||||
&:enabled {
|
||||
color: var(--pi-color-white);
|
||||
border-color: var(--pi-color-primary);
|
||||
background-color: var(--pi-color-primary);
|
||||
}
|
||||
}
|
||||
&:disabled {
|
||||
color: var(--pi-color-primary-200);
|
||||
}
|
||||
// Is Active
|
||||
&.is-active {
|
||||
color: var(--pi-color-white);
|
||||
border-color: var(--pi-color-primary);
|
||||
background-color: var(--pi-color-primary);
|
||||
}
|
||||
}
|
||||
// Outline & Accent
|
||||
&.pi-color__accent {
|
||||
color: var(--pi-color-accent);
|
||||
&:hover {
|
||||
&:enabled {
|
||||
color: var(--pi-color-white);
|
||||
border-color: var(--pi-color-accent);
|
||||
background-color: var(--pi-color-accent);
|
||||
}
|
||||
}
|
||||
&:disabled {
|
||||
color: var(--pi-color-accent-200);
|
||||
border-color: var(--pi-color-accent-200);
|
||||
}
|
||||
// Is Active
|
||||
&.is-active {
|
||||
color: var(--pi-color-white);
|
||||
background-color: var(--pi-color-accent);
|
||||
border-color: var(--pi-color-accent);
|
||||
}
|
||||
}
|
||||
// Outline & Warn
|
||||
&.pi-color__warn {
|
||||
color: var(--pi-color-warn);
|
||||
&:hover {
|
||||
&:enabled {
|
||||
color: var(--pi-color-white);
|
||||
background-color: var(--pi-color-warn);
|
||||
border-color: var(--pi-color-warn);
|
||||
}
|
||||
}
|
||||
&:disabled {
|
||||
color: var(--pi-color-warn-200);
|
||||
}
|
||||
// Is Active
|
||||
&.is-active {
|
||||
color: var(--pi-color-white);
|
||||
background-color: var(--pi-color-warn);
|
||||
border-color: var(--pi-color-warn);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline & Highlighted
|
||||
&.pi-color__highlighted {
|
||||
color: var(--pi-color-highlighted);
|
||||
&:hover {
|
||||
&:enabled {
|
||||
color: var(--pi-color-white);
|
||||
background-color: var(--pi-color-highlighted);
|
||||
border-color: var(--pi-color-highlighted);
|
||||
}
|
||||
}
|
||||
&:disabled {
|
||||
color: var(--pi-color-highlighted-200);
|
||||
}
|
||||
// Is Active
|
||||
&.is-active {
|
||||
color: var(--pi-color-white);
|
||||
background-color: var(--pi-color-highlighted);
|
||||
border-color: var(--pi-color-highlighted);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline & White
|
||||
&.pi-color__white {
|
||||
color: var(--pi-color-white);
|
||||
&:hover {
|
||||
&:enabled {
|
||||
color: var(--pi-color-primary);
|
||||
background-color: var(--pi-color-white);
|
||||
border-color: var(--pi-color-white);
|
||||
}
|
||||
}
|
||||
&:disabled {
|
||||
color: rgba($color: #ffffff, $alpha: 0.6);
|
||||
}
|
||||
// Is Active
|
||||
&.is-active {
|
||||
color: var(--pi-color-primary);
|
||||
background-color: var(--pi-color-white);
|
||||
border-color: var(--pi-color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin publicFixedButtonSideSpacing(
|
||||
$top-spacing: calc(var(--pi-spacing-medium) + env(safe-area-inset-top)),
|
||||
$side-spacing: var(--pi-spacing-medium),
|
||||
$bottom-left-spacing: calc(var(--pi-spacing-medium) + env(safe-area-inset-bottom)),
|
||||
$bottom-right-spacing: calc(5.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom))
|
||||
) {
|
||||
.pi-shell {
|
||||
&.pi-shell__deale-website,
|
||||
&.is-public {
|
||||
// Fixed
|
||||
button,
|
||||
.pi-icon-button,
|
||||
.pi-action-button {
|
||||
&.is-fixed {
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
&.is-fixed--top-left,
|
||||
&.is-fixed--top-right {
|
||||
top: $top-spacing;
|
||||
right: $side-spacing;
|
||||
}
|
||||
&.is-fixed--bottom-left {
|
||||
bottom: $bottom-left-spacing;
|
||||
left: $side-spacing;
|
||||
}
|
||||
&.is-fixed--bottom-right {
|
||||
bottom: $bottom-right-spacing;
|
||||
right: $side-spacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pi-shell {
|
||||
&.pi-shell__deale-website,
|
||||
.is-public {
|
||||
button {
|
||||
// Colors
|
||||
@include publicButtonsColors;
|
||||
// Sizes
|
||||
@include publicButtonsSizes;
|
||||
}
|
||||
// Common
|
||||
button {
|
||||
&.pi-button {
|
||||
// X Large
|
||||
&.pi-button__x-large {
|
||||
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large);
|
||||
border-radius: 1.4rem;
|
||||
// Mobile
|
||||
@media screen and (max-width: 40rem) {
|
||||
height: 3.125rem;
|
||||
min-width: 10.6875rem;
|
||||
font: {
|
||||
size: var(--pi-font-size-small);
|
||||
}
|
||||
}
|
||||
// Tablet & Desktop
|
||||
@media screen and (min-width: 40rem) {
|
||||
height: 3.75rem;
|
||||
min-width: 11.25rem;
|
||||
font: {
|
||||
size: var(--pi-font-size-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
html,
|
||||
.cdk-overlay-container {
|
||||
// Mobile
|
||||
&.is-mobile {
|
||||
@include publicFixedButtonSideSpacing(
|
||||
calc(var(--pi-spacing-medium) + env(safe-area-inset-top)),
|
||||
var(--pi-spacing-medium),
|
||||
calc(var(--pi-spacing-medium) + env(safe-area-inset-bottom)),
|
||||
calc(5.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom))
|
||||
);
|
||||
}
|
||||
&.is-tablet {
|
||||
&.is-tablet__small {
|
||||
@include publicFixedButtonSideSpacing(
|
||||
calc(var(--pi-spacing-x-large) + env(safe-area-inset-top)),
|
||||
var(--pi-spacing-x-large),
|
||||
calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom)),
|
||||
calc(3.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom))
|
||||
);
|
||||
}
|
||||
&.is-tablet__large {
|
||||
@include publicFixedButtonSideSpacing(
|
||||
calc(var(--pi-spacing-x-large) + env(safe-area-inset-top)),
|
||||
var(--pi-spacing-x-large),
|
||||
calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom)),
|
||||
calc(5.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom))
|
||||
);
|
||||
}
|
||||
}
|
||||
// Tablet & Desktop
|
||||
&.is-desktop {
|
||||
@include publicFixedButtonSideSpacing(
|
||||
calc(var(--pi-spacing-x-large) + env(safe-area-inset-top)),
|
||||
var(--pi-spacing-x-large),
|
||||
calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom)),
|
||||
calc(5.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom))
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,204 @@
|
||||
@mixin defaultButtonsProperties {
|
||||
line-height: 100%;
|
||||
font: {
|
||||
family: 'Soehne', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
&:hover {
|
||||
&:not(:disabled):not(.pi-button__toggle) {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
&.is-active {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
// Default
|
||||
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
|
||||
.pi-button__type--menu-item
|
||||
) {
|
||||
border: none;
|
||||
|
||||
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__xx-small):not(
|
||||
.pi-button__x-large
|
||||
):not(.pi-button__toggle):not(.pi-button__trimmed):not(.ch2-btn):not(
|
||||
.pi-button__icon--single
|
||||
):not(.pi-button__x-small) {
|
||||
padding-top: var(--pi-spacing-xx-small);
|
||||
padding-bottom: var(--pi-spacing-xx-small);
|
||||
}
|
||||
&:not(.pi-button__x-large):not(.pi-button__trimmed):not(.pi-button__toggle) {
|
||||
&:not(.pi-button__x-small) {
|
||||
border-radius: var(--pi-border-radius-medium);
|
||||
-webkit-border-radius: var(--pi-border-radius-medium);
|
||||
-moz-border-radius: var(--pi-border-radius-medium);
|
||||
}
|
||||
&.pi-button__x-small {
|
||||
border-radius: 0.75rem;
|
||||
-webkit-border-radius: 0.75rem;
|
||||
-moz-border-radius: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.pi-button__icon--single):not(.pi-button__xx-small):not(.pi-button__trimmed):not(
|
||||
.pi-button__toggle
|
||||
):not(.ch2-btn) {
|
||||
&:not(.pi-button__x-small) {
|
||||
min-width: 5.5rem;
|
||||
padding-left: var(--pi-spacing-x-large);
|
||||
padding-right: var(--pi-spacing-x-large);
|
||||
}
|
||||
&.pi-button__x-small {
|
||||
min-width: 4.5rem;
|
||||
padding-left: var(--pi-spacing-xx-small);
|
||||
padding-right: var(--pi-spacing-xx-small);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.pi-button__appearance--outline) {
|
||||
transition: all 0.25s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin buttonsSizes {
|
||||
// Default
|
||||
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
|
||||
.pi-button__type--menu-item
|
||||
) {
|
||||
&.pi-button__x-small {
|
||||
font: {
|
||||
size: 0.8125rem;
|
||||
}
|
||||
&:not(.pi-button__trimmed) {
|
||||
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-medium);
|
||||
}
|
||||
}
|
||||
&.pi-button__trimmed {
|
||||
padding: 0;
|
||||
}
|
||||
&.pi-button__xx-small {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: var(--pi-spacing-x-small);
|
||||
height: 1.375rem;
|
||||
line-height: 100%;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
min-width: 4.5rem;
|
||||
max-width: 12.5rem;
|
||||
padding: 0 var(--pi-spacing-small);
|
||||
-webkit-border-radius: var(--pi-border-radius-small);
|
||||
-moz-border-radius: var(--pi-border-radius-small);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font: {
|
||||
size: 0.75rem;
|
||||
}
|
||||
|
||||
font: {
|
||||
size: 0.8125rem;
|
||||
}
|
||||
}
|
||||
&.pi-button__trimed {
|
||||
min-width: unset;
|
||||
padding: var(--pi-spacing-xxxx-small) 0;
|
||||
}
|
||||
&:not(.pi-button__trimmed):not(.pi-button__icon--single) {
|
||||
// Small
|
||||
&.pi-button__small {
|
||||
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-small);
|
||||
}
|
||||
// Medium
|
||||
&.pi-button__medium {
|
||||
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large);
|
||||
}
|
||||
// Large
|
||||
&.pi-button__large {
|
||||
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large);
|
||||
// Mobile & Tablet S
|
||||
@media screen and (max-width: 62rem) {
|
||||
min-width: 10.6875rem;
|
||||
}
|
||||
// Tablet L & Desktop
|
||||
@media screen and (min-width: 62rem) {
|
||||
min-width: 11.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// W 100
|
||||
&.pi-button__w100 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
html,
|
||||
.cdk-overlay-container {
|
||||
button {
|
||||
// Default properties
|
||||
@include defaultButtonsProperties;
|
||||
|
||||
// Sizes
|
||||
@include buttonsSizes;
|
||||
}
|
||||
}
|
||||
|
||||
.pi-filter-button,
|
||||
.pi-expand-button {
|
||||
// Tablet & Desktop
|
||||
@media screen and (min-width: 40rem) {
|
||||
&.is-open {
|
||||
.pi-big-icon,
|
||||
figure {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Close button in modals
|
||||
.pi-modal {
|
||||
.pi-close-button {
|
||||
&::after,
|
||||
&::before {
|
||||
width: var(--pi-spacing-x-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pi-layout {
|
||||
&.pi-layout__05-splitted {
|
||||
.pi-wrapper__action {
|
||||
&.pi-wrapper__flex-direction--column {
|
||||
.pi-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cdk-overlay-container,
|
||||
html {
|
||||
&.is-mobile {
|
||||
.pi-icon-button {
|
||||
&.is-responsive {
|
||||
& > button {
|
||||
// Text
|
||||
&.has-text {
|
||||
padding: unset;
|
||||
min-width: unset;
|
||||
width: var(--pi-spacing-xxx-large);
|
||||
& > span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
@forward 'pi-button-private';
|
||||
@forward 'pi-button-public';
|
||||
@forward 'pi-button';
|
||||
@@ -0,0 +1,75 @@
|
||||
/**
|
||||
* APPEARANCE:
|
||||
*
|
||||
* 1. Fill:
|
||||
*
|
||||
* Similar look and feel to the Form Fields Fill Appearance.
|
||||
* Data Grid with inner stroke between each grid item.
|
||||
*
|
||||
**/
|
||||
@mixin dataGridAppearanceFill() {
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* 2. Outline:
|
||||
*
|
||||
* A Data Grid with outer border and a inner stroke between each grid item appart from the last one.
|
||||
*
|
||||
**/
|
||||
|
||||
@mixin dataGridAppearanceOutline() {
|
||||
background-color: var(--pi-color-white);
|
||||
|
||||
&.pi-data-grid__appearance--outline {
|
||||
// Inner Stroke between grid items
|
||||
// Data Direction:
|
||||
// Row
|
||||
&.pi-data-grid__data-direction--row {
|
||||
.pi-grid-item {
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: 1px solid;
|
||||
border-color: var(--pi-color-grey-50);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Column
|
||||
&.pi-data-grid__data-direction--column {
|
||||
.pi-grid-item {
|
||||
.pi-cell {
|
||||
&:not(.pi-cell__type--sum) {
|
||||
border-bottom: 1px solid;
|
||||
border-color: var(--pi-color-grey-50);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Outline Appearance in mode === Grid
|
||||
// Card Type: List
|
||||
&.pi-data-grid__card-type--list {
|
||||
.pi-cell {
|
||||
&:not(.pi-cell__type--sum) {
|
||||
border-bottom: 1px solid;
|
||||
border-color: var(--pi-color-grey-50);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* 3. Ghost:
|
||||
*
|
||||
* A Data Grid without outer and inner strokes between the grid items.
|
||||
*
|
||||
**/
|
||||
@mixin dataGridAppearanceGhost() {
|
||||
}
|
||||
|
||||
// Data grid
|
||||
.pi-data-grid {
|
||||
@include dataGridAppearanceOutline;
|
||||
}
|
||||
@@ -0,0 +1,261 @@
|
||||
@mixin cellWidth($default-width, $action-width, $icon-width, $description-width) {
|
||||
.pi-cell {
|
||||
display: flex;
|
||||
// Cell type default
|
||||
&:not(.pi-cell__type--icon):not(.pi-cell__type--action):not(.pi-cell__type--checkbox):not(
|
||||
.pi-cell__type--date
|
||||
):not(.pi-cell__type--description) {
|
||||
width: $default-width;
|
||||
flex-grow: 1;
|
||||
}
|
||||
&.pi-cell__type--action,
|
||||
&.pi-cell__type--date {
|
||||
width: $action-width;
|
||||
}
|
||||
&.pi-cell__type--checkbox,
|
||||
&.pi-cell__type--icon {
|
||||
width: $icon-width;
|
||||
}
|
||||
&.pi-cell__type--description {
|
||||
width: $description-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin dataGridHasBoxShadow() {
|
||||
// MODE List (Table)
|
||||
.is-mode-list {
|
||||
// Data grid
|
||||
.pi-data-grid {
|
||||
&.has-box-shadow {
|
||||
box-shadow: var(--pi-box-shadow-panel);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// MODE List (Table)
|
||||
.is-mode-list {
|
||||
// Data grid
|
||||
.pi-data-grid {
|
||||
background-color: var(--pi-color-white);
|
||||
|
||||
// Grid item (*Row with data direction === column | *Column with data direction === row)
|
||||
.pi-grid-item {
|
||||
display: flex;
|
||||
|
||||
& > .pi-grid-item__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--pi-spacing-x-small);
|
||||
min-height: 3.25rem;
|
||||
width: 100%;
|
||||
}
|
||||
& > aside {
|
||||
min-height: 3.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Data direction column (1 grid item = 1 column)
|
||||
&.pi-data-grid__data-direction--row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.pi-grid-item {
|
||||
align-items: center;
|
||||
gap: var(--pi-spacing-medium);
|
||||
min-height: var(--pi-spacing-xxxx-large);
|
||||
width: 100%;
|
||||
}
|
||||
// Appearacne Outline
|
||||
|
||||
&:not(.pi-data-grid__appearance--ghost) {
|
||||
.pi-grid-item {
|
||||
padding-left: var(--pi-spacing-x-large);
|
||||
padding-right: var(--pi-spacing-x-large);
|
||||
}
|
||||
}
|
||||
|
||||
// Cell
|
||||
.pi-cell {
|
||||
align-items: center;
|
||||
gap: var(--pi-spacing-xx-small);
|
||||
|
||||
&.pi-cell__type--action,
|
||||
&.pi-cell__type--icon {
|
||||
justify-content: flex-end;
|
||||
.pi-text-viewer {
|
||||
article {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 3 Columns
|
||||
&.pi-data-grid__columns--3 {
|
||||
@include cellWidth(35%, 30%, 25%, 45%);
|
||||
}
|
||||
|
||||
// 4 Columns
|
||||
&.pi-data-grid__columns--4 {
|
||||
@include cellWidth(40%, 35%, 30%, 50%);
|
||||
}
|
||||
// 5 Columns
|
||||
&.pi-data-grid__columns--5 {
|
||||
@include cellWidth(20%, 15%, 10%, 30%);
|
||||
}
|
||||
// 6 Columns
|
||||
&.pi-data-grid__columns--6 {
|
||||
@include cellWidth(18.66%, 13%, 10%, 28%);
|
||||
}
|
||||
// 7 Columns
|
||||
&.pi-data-grid__columns--7 {
|
||||
@include cellWidth(20.28%, 6.5%, 10%, 33%);
|
||||
}
|
||||
// 8 Columns
|
||||
&.pi-data-grid__columns--8 {
|
||||
@include cellWidth(12.5%, 12.5%, 10%, 22%);
|
||||
}
|
||||
// 9 Columns
|
||||
&.pi-data-grid__columns--9 {
|
||||
@include cellWidth(11.11%, 11.11%, 10%, 18%);
|
||||
}
|
||||
// 10 Columns
|
||||
&.pi-data-grid__columns--10 {
|
||||
@include cellWidth(10%, 10%, 10%, 15%);
|
||||
}
|
||||
// 11 Columns
|
||||
&.pi-data-grid__columns--11 {
|
||||
@include cellWidth(9%, 9%, 9%, 12%);
|
||||
}
|
||||
// 12 Columns
|
||||
&.pi-data-grid__columns--12 {
|
||||
@include cellWidth(8.33%, 8.33%, 8.33%, 11%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// MODE Grid (Card) (*infinite scroll)
|
||||
.is-mode-grid {
|
||||
.pi-data-grid {
|
||||
display: grid;
|
||||
gap: var(--pi-spacing-medium);
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
// Mobile
|
||||
&.is-mobile {
|
||||
.is-mode-grid {
|
||||
.pi-data-grid {
|
||||
&.pi-data-grid__data-direction--column {
|
||||
.pi-grid-item {
|
||||
flex-direction: column;
|
||||
.pi-cell {
|
||||
&.pi-text-viewer,
|
||||
& > .pi-text-viewer {
|
||||
&.pi-text-viewer__font-size--s {
|
||||
label {
|
||||
font: {
|
||||
size: var(--pi-font-size-x-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mobile & Tablet
|
||||
&:not(.is-desktop) {
|
||||
// Small Device
|
||||
@media screen and (max-width: 62rem) {
|
||||
// MODE List (Table)
|
||||
|
||||
.is-mode-list {
|
||||
// Data grid
|
||||
.pi-data-grid {
|
||||
// Data direction column (1 grid item = 1 column)
|
||||
|
||||
&.pi-data-grid__data-direction--column {
|
||||
.pi-grid-item {
|
||||
&.pi-grid-item__context--keys {
|
||||
.pi-cell {
|
||||
min-width: 20rem;
|
||||
&.pi-text-viewer {
|
||||
&.pi-text-viewer__align--center {
|
||||
article {
|
||||
margin-top: var(--pi-spacing-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(.is-active) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.pi-cell {
|
||||
&.is-active {
|
||||
display: flex;
|
||||
}
|
||||
&:not(.is-active) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.is-mode-grid {
|
||||
.pi-data-grid {
|
||||
&.pi-data-grid__data-direction--column {
|
||||
.pi-grid-item {
|
||||
&:not(.is-active) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tablet & Desktop
|
||||
&:not(.is-mobile) {
|
||||
// Large Device
|
||||
@media screen and (min-width: 62rem) {
|
||||
// MODE List (Table)
|
||||
.is-mode-list {
|
||||
// Data grid
|
||||
.pi-data-grid {
|
||||
// Data direction column (1 grid item = 1 column)
|
||||
&.pi-data-grid__data-direction--column {
|
||||
.pi-grid-item {
|
||||
.pi-cell {
|
||||
.pi-text-viewer {
|
||||
&.pi-text-viewer__justify--flex-end {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
&:not(.pi-cell__type--sum) + .pi-cell__type--sum {
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: var(--pi-spacing-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 4 rows
|
||||
&.pi-data-grid__rows--4 {
|
||||
.pi-grid-item {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
/**
|
||||
*
|
||||
* Card Type
|
||||
*
|
||||
**/
|
||||
|
||||
/**
|
||||
*
|
||||
* Card Type: LIST
|
||||
*
|
||||
**/
|
||||
@mixin dataGridCardTypeList {
|
||||
&.pi-data-grid__card-type--list {
|
||||
// Data Grid Columns:
|
||||
// 7
|
||||
@include dataGridCardTypeList7;
|
||||
// 11
|
||||
@include dataGridCardTypeList11;
|
||||
|
||||
.pi-grid-item {
|
||||
&.pi-card {
|
||||
display: grid;
|
||||
.pi-cell {
|
||||
min-height: calc(var(--pi-spacing-xxxx-large) + var(--pi-spacing-xx-small) + 0.0625rem);
|
||||
margin-top: var(--pi-spacing-xx-small);
|
||||
|
||||
& > .pi-text-viewer,
|
||||
&.pi-text-viewer {
|
||||
article {
|
||||
transform: translateY(var(--pi-spacing-xx-small));
|
||||
}
|
||||
label {
|
||||
font: {
|
||||
size: var(--pi-font-size-x-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* Card Type: LIST
|
||||
*
|
||||
* Columns: 7
|
||||
*
|
||||
**/
|
||||
@mixin dataGridCardTypeList7() {
|
||||
&.pi-data-grid__columns--7 {
|
||||
.pi-grid-item {
|
||||
&.pi-card {
|
||||
@for $i from 1 through 14 {
|
||||
& > *:nth-child(#{$i}) {
|
||||
grid-area: item#{$i};
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
.pi-cell {
|
||||
width: -webkit-fill-available;
|
||||
}
|
||||
|
||||
@for $i from 8 through 14 {
|
||||
& > *:nth-child(#{$i}) {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
grid-template-rows: repeat(7, 1fr);
|
||||
grid-template-areas:
|
||||
'item1 item8'
|
||||
'item2 item9'
|
||||
'item3 item10'
|
||||
'item4 item11'
|
||||
'item5 item12'
|
||||
'item6 item13'
|
||||
'item7 item14';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* Card Type: LIST
|
||||
*
|
||||
* Columns: 11
|
||||
*
|
||||
**/
|
||||
@mixin dataGridCardTypeList11() {
|
||||
&.pi-data-grid__columns--11 {
|
||||
.pi-grid-item {
|
||||
&.pi-card {
|
||||
@for $i from 1 through 22 {
|
||||
& > *:nth-child(#{$i}) {
|
||||
grid-area: item#{$i};
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 12 through 22 {
|
||||
& > *:nth-child(#{$i}) {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
grid-template-rows: repeat(11, 1fr);
|
||||
grid-template-areas:
|
||||
'item1 item12'
|
||||
'item2 item13'
|
||||
'item3 item14'
|
||||
'item4 item15'
|
||||
'item5 item16'
|
||||
'item6 item17'
|
||||
'item7 item18'
|
||||
'item8 item19'
|
||||
'item9 item20'
|
||||
'item10 item21'
|
||||
'item11 item22';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* Card Type: HORIZONTAL
|
||||
*
|
||||
**/
|
||||
@mixin dataGridCardTypeHorizontal() {
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* Card Type: SQUARED
|
||||
*
|
||||
**/
|
||||
@mixin dataGridCardTypeSquared() {
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* Card Type: VERTICAL
|
||||
*
|
||||
**/
|
||||
@mixin dataGridCardTypeVertical() {
|
||||
}
|
||||
|
||||
.pi-data-grid {
|
||||
@include dataGridCardTypeList;
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
/**
|
||||
* DATA DIRECTION:
|
||||
*
|
||||
* Data Grid Mode: LIST.
|
||||
* This will be the case when the data grid's mode is set to List which means that the data Grid emulates a Data Table.
|
||||
*
|
||||
* 1. Column:
|
||||
*
|
||||
* Any grid item is a column. The data projection will be horizontal.
|
||||
*
|
||||
**/
|
||||
|
||||
@mixin dataGridDataDirectionColumn($key-cell-width: 15rem, $value-cell-width: 6rem) {
|
||||
// MODE List (Table)
|
||||
|
||||
.pi-data-grid {
|
||||
// Data direction:
|
||||
// Column (1 grid item = 1 column)
|
||||
&.pi-data-grid__data-direction--column {
|
||||
display: flex;
|
||||
|
||||
.pi-grid-item {
|
||||
flex-direction: column;
|
||||
|
||||
// Cell
|
||||
.pi-cell {
|
||||
min-height: calc(var(--pi-spacing-xxxx-large) + var(--pi-spacing-xx-small) + 0.0625rem);
|
||||
margin-top: var(--pi-spacing-xx-small);
|
||||
// Vertival align
|
||||
&.pi-cell__vertical-align--center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
// Override the Vertical Align Center visualize cells (text viewers)
|
||||
// with the editable ones (text fields) in form data grids
|
||||
&.pi-text-viewer,
|
||||
& > .pi-text-viewer {
|
||||
& > * {
|
||||
transform: translateY(var(--pi-spacing-x-small));
|
||||
}
|
||||
}
|
||||
}
|
||||
// Content Type:
|
||||
// Keys (HEADINGS)
|
||||
&.pi-grid-item__context--keys {
|
||||
min-width: $key-cell-width;
|
||||
|
||||
// Cell in Keys context
|
||||
.pi-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
|
||||
& > *:nth-child(1) {
|
||||
margin-left: var(--pi-spacing-medium);
|
||||
}
|
||||
|
||||
& > *:nth-child(n + 2) {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Values
|
||||
&:not(.pi-grid-item__context--keys) {
|
||||
min-width: $value-cell-width;
|
||||
width: -webkit-fill-available;
|
||||
}
|
||||
}
|
||||
|
||||
// Justify Content:
|
||||
// Space Between
|
||||
&.pi-data-grid__justify-content--space-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
// Flex Start
|
||||
&.pi-data-grid__justify-content--flex-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* 2. Row:
|
||||
*
|
||||
* Any grid item is a row. The data projection will be vertical.
|
||||
*
|
||||
**/
|
||||
@mixin dataGridDataDirectionRow() {
|
||||
// MODE List (Table)
|
||||
.is-mode-list {
|
||||
.pi-data-grid {
|
||||
// Data direction row (1 grid item = 1 row)
|
||||
&.pi-data-grid__data-direction--column {
|
||||
// Scrollable area
|
||||
.pi-data-grid__content {
|
||||
margin: 0 auto;
|
||||
width: -webkit-fill-available;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
// Generic Scroll
|
||||
&::-webkit-scrollbar {
|
||||
width: 0.1875rem;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--pi-color-grey-25);
|
||||
border-radius: var(--pi-border-radius-x-small);
|
||||
|
||||
&:hover {
|
||||
transition: var(--pi-animation);
|
||||
background-color: var(--pi-color-grey-50);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
// Tablet
|
||||
&.is-tablet {
|
||||
// Tablet L
|
||||
&.is-tablet__large {
|
||||
@include dataGridDataDirectionColumn;
|
||||
}
|
||||
}
|
||||
|
||||
// Desktop
|
||||
&.is-desktop {
|
||||
// Desktop S
|
||||
&.is-desktop__small {
|
||||
@include dataGridDataDirectionColumn(13.5rem, 8rem);
|
||||
}
|
||||
// Desktop M
|
||||
&.is-desktop__medium {
|
||||
@include dataGridDataDirectionColumn(15rem, 9.125rem);
|
||||
}
|
||||
// Desktop L
|
||||
&.is-desktop__large {
|
||||
@include dataGridDataDirectionColumn(18rem, 8.5rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
/**
|
||||
* MODE:
|
||||
* The following properties defines when the Data Grid Component emulates a Data Table or a Cards Lidst,
|
||||
* depending on Mode binded by the List Configs.
|
||||
* Note that in small devices, the Mode will be always set as Grid.
|
||||
*
|
||||
* 1. Grid:
|
||||
*
|
||||
* A cards list in a grid.
|
||||
*
|
||||
**/
|
||||
@mixin dataGridModeGrid() {
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* 2. List:
|
||||
*
|
||||
* A cards list in a grid.
|
||||
*
|
||||
**/
|
||||
@mixin dataGridModeList() {
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@forward 'appearance';
|
||||
@forward 'card-type';
|
||||
@forward 'base-data-grid';
|
||||
@forward 'data-direction';
|
||||
@forward 'mode';
|
||||
@@ -0,0 +1,285 @@
|
||||
@mixin incrementalCellField(
|
||||
$max-width: calc(100% - var(--pi-spacing-x-large)),
|
||||
$margin-left: var(--pi-spacing-x-large)
|
||||
) {
|
||||
.pi-shell,
|
||||
.cdk-overlay-container {
|
||||
.pi-cell {
|
||||
.pi-field {
|
||||
// Incremental field
|
||||
&.pi-form-field__incremental {
|
||||
&:not(.pi-form-field__incremental--range) {
|
||||
.mat-mdc-form-field {
|
||||
// Fill
|
||||
&.mat-form-field-appearance-fill {
|
||||
.mat-mdc-text-field-wrapper {
|
||||
max-width: $max-width;
|
||||
margin-left: $margin-left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pi-shell,
|
||||
.cdk-overlay-container {
|
||||
.pi-field {
|
||||
// Incremental field
|
||||
&.pi-form-field__incremental {
|
||||
.mat-mdc-form-field {
|
||||
width: -webkit-fill-available;
|
||||
&.mat-focused {
|
||||
.mat-mdc-form-field-placeholder {
|
||||
color: var(--pi-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-text-field-wrapper {
|
||||
.mat-mdc-form-field-underline {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.mat-mdc-form-field-flex {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: calc(var(--pi-spacing-xxxx-large) + var(--pi-spacing-xx-small));
|
||||
.mat-mdc-form-field-infix {
|
||||
text-align: center;
|
||||
}
|
||||
.mat-mdc-form-field-suffix {
|
||||
padding-right: var(--pi-spacing-medium);
|
||||
}
|
||||
.pi-affix {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--pi-spacing-xx-small);
|
||||
|
||||
&.pi-affix__suffix {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
input {
|
||||
&.mat-mdc-input-element {
|
||||
text-align: right !important;
|
||||
}
|
||||
}
|
||||
// Add & Substract icons
|
||||
.pi-icon {
|
||||
&:not(.pi-icon__appearance--fill),
|
||||
&.pi-icon__small {
|
||||
border: 1px solid var(--pi-color-primary);
|
||||
border-radius: var(--pi-border-radius-x-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// NOT Has error
|
||||
&:not(.has-error) {
|
||||
&:not(.mat-focused) {
|
||||
.mdc-text-field {
|
||||
.mdc-text-field__input {
|
||||
color: var(--pi-color-black);
|
||||
}
|
||||
&:not(.mdc-text-field--disabled) {
|
||||
.mdc-text-field__input {
|
||||
color: var(--pi-color-black);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mat-focused {
|
||||
.mdc-text-field {
|
||||
.mdc-text-field__input {
|
||||
color: var(--pi-color-primary);
|
||||
}
|
||||
&:not(.mdc-text-field--disabled) {
|
||||
.mdc-text-field__input {
|
||||
color: var(--pi-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// has error
|
||||
&.has-error {
|
||||
.mdc-text-field {
|
||||
.mdc-text-field__input {
|
||||
color: var(--pi-color-warn);
|
||||
}
|
||||
&:not(.mdc-text-field--disabled) {
|
||||
.mdc-text-field__input {
|
||||
color: var(--pi-color-warn);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled
|
||||
&.is-disabled {
|
||||
color: var(--pi-color-grey-200);
|
||||
}
|
||||
|
||||
// Incremental range
|
||||
&.pi-form-field__incremental--range {
|
||||
& > form {
|
||||
display: flex;
|
||||
gap: var(--pi-spacing-medium);
|
||||
|
||||
& > div {
|
||||
width: -webkit-fill-available;
|
||||
}
|
||||
|
||||
.pi-label {
|
||||
span {
|
||||
color: var(--pi-color-primary);
|
||||
font: {
|
||||
size: var(--pi-font-size-x-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pi-form-field__incremental {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
.mat-mdc-form-field-flex {
|
||||
width: 99%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pi-dynamic-menu,
|
||||
.pi-card {
|
||||
.mat-mdc-text-field-wrapper {
|
||||
.mat-mdc-form-field-input-control {
|
||||
height: 3.45rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Cells with incrementals inputs: suffix light weight
|
||||
.pi-cell {
|
||||
.mat-mdc-text-field-wrapper {
|
||||
.mat-mdc-form-field-icon-suffix {
|
||||
.pi-affix__suffix {
|
||||
& > span {
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
// Mobile & Tablet
|
||||
&:not(.is-desktop) {
|
||||
// Small device
|
||||
@media screen and (max-width: 62rem) {
|
||||
.pi-shell,
|
||||
.cdk-overlay-container {
|
||||
.pi-field {
|
||||
// Incremental field
|
||||
&.pi-form-field__incremental {
|
||||
// Add & Substract icons
|
||||
.pi-icon {
|
||||
&:not(.pi-icon__appearance--fill),
|
||||
&.pi-icon__small {
|
||||
height: var(--pi-spacing-large);
|
||||
width: var(--pi-spacing-large);
|
||||
border-radius: 42%;
|
||||
.mat-icon {
|
||||
height: var(--pi-spacing-medium);
|
||||
width: var(--pi-spacing-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Incremental range
|
||||
&.pi-form-field__incremental--range {
|
||||
.mat-mdc-text-field-wrapper {
|
||||
.mat-mdc-form-field-input-control {
|
||||
width: calc(50vw - 9rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include incrementalCellField;
|
||||
}
|
||||
}
|
||||
// Tablet & Desktop
|
||||
&:not(.is-mobile) {
|
||||
// Large device
|
||||
@media screen and (min-width: 62rem) {
|
||||
.pi-shell,
|
||||
.cdk-overlay-container {
|
||||
.pi-field {
|
||||
// Incremental field
|
||||
&.pi-form-field__incremental {
|
||||
// Add & Substract icons
|
||||
.pi-icon {
|
||||
&:not(.pi-icon__appearance--fill),
|
||||
&.pi-icon__small {
|
||||
height: var(--pi-spacing-medium);
|
||||
width: var(--pi-spacing-medium);
|
||||
border-radius: 42%;
|
||||
.mat-icon {
|
||||
height: var(--pi-spacing-small);
|
||||
width: var(--pi-spacing-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-tablet {
|
||||
&.is-tablet__small {
|
||||
@include incrementalCellField(
|
||||
calc(100% - var(--pi-spacing-xx-large) - 25%),
|
||||
calc(var(--pi-spacing-xx-large) + 25%)
|
||||
);
|
||||
}
|
||||
&.is-tablet__large {
|
||||
@include incrementalCellField(
|
||||
calc(100% - var(--pi-spacing-xx-large) - 12.5%),
|
||||
calc(var(--pi-spacing-xx-large) + 12.5%)
|
||||
);
|
||||
}
|
||||
}
|
||||
// Desktop
|
||||
&.is-desktop {
|
||||
// Desktop S
|
||||
&.is-desktop__small {
|
||||
@include incrementalCellField(
|
||||
calc(100% - var(--pi-spacing-xx-large)),
|
||||
calc(var(--pi-spacing-xx-large))
|
||||
);
|
||||
}
|
||||
// Desktop M
|
||||
&.is-desktop__medium {
|
||||
@include incrementalCellField(
|
||||
calc(100% - var(--pi-spacing-xx-large) - 33.33%),
|
||||
calc(var(--pi-spacing-xx-large) + 33.33%)
|
||||
);
|
||||
}
|
||||
// Desktop L
|
||||
&.is-desktop__large {
|
||||
@include incrementalCellField(
|
||||
calc(100% - var(--pi-spacing-xx-large) - 40%),
|
||||
calc(var(--pi-spacing-xx-large) + 40%)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
.pi-shell,
|
||||
.cdk-overlay-container {
|
||||
.pi-field {
|
||||
// Password
|
||||
&.pi-form-field__password {
|
||||
button {
|
||||
&.pi-button__icon {
|
||||
color: var(--pi-color-grey-200);
|
||||
&:hover {
|
||||
&:enabled {
|
||||
color: var(--pi-color-grey-200);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
.pi-shell,
|
||||
.cdk-overlay-container {
|
||||
.pi-field {
|
||||
// Textarea
|
||||
&.pi-form-field__textarea {
|
||||
.mat-mdc-text-field-wrapper {
|
||||
min-height: 7rem;
|
||||
&.mdc-text-field--outlined {
|
||||
.mdc-text-field__input {
|
||||
padding: var(--pi-spacing-xx-small) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-form-field {
|
||||
height: unset;
|
||||
textarea {
|
||||
&.mat-mdc-input-element {
|
||||
font: {
|
||||
family: 'Soehne', Helvetica, Arial, sans-serif;
|
||||
size: var(--pi-font-size-small);
|
||||
weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Outline
|
||||
&.mat-mdc-form-field-appearance-outline {
|
||||
[class*='mat-form-field-outline-'] {
|
||||
height: auto;
|
||||
}
|
||||
.mat-mdc-form-field-infix {
|
||||
padding: var(--pi-spacing-small) 0;
|
||||
textarea {
|
||||
&.mat-mdc-input-element {
|
||||
padding: var(--pi-spacing-xxx-small) 0 var(--pi-spacing-x-small) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// fill
|
||||
&.mat-form-field-appearance-fill {
|
||||
textarea {
|
||||
&.mat-mdc-input-element {
|
||||
// max-width: calc(100% - var(--pi-spacing-medium));
|
||||
margin-top: var(--pi-spacing-x-small);
|
||||
background-color: var(--pi-color-background-400);
|
||||
transition: var(--pi-animation-fast);
|
||||
}
|
||||
}
|
||||
|
||||
&.mat-form-field-disabled {
|
||||
textarea {
|
||||
&.mat-mdc-input-element {
|
||||
background-color: var(--pi-color-white);
|
||||
}
|
||||
}
|
||||
& + span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&:not(.mat-form-field-disabled) {
|
||||
textarea {
|
||||
&.mat-mdc-input-element {
|
||||
padding: var(--pi-spacing-x-small);
|
||||
background-color: var(--pi-color-background-400);
|
||||
}
|
||||
}
|
||||
}
|
||||
& + span {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
margin-top: var(--pi-spacing-xx-small);
|
||||
font: {
|
||||
size: var(--pi-font-size-x-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
181
libs/ui/src/lib/styles/common/components/pi-field/_pi-field.scss
Normal file
181
libs/ui/src/lib/styles/common/components/pi-field/_pi-field.scss
Normal file
@@ -0,0 +1,181 @@
|
||||
.pi-shell,
|
||||
.cdk-overlay-container {
|
||||
.pi-field {
|
||||
&:not(.pi-form-field__incremental) {
|
||||
// Icon colors
|
||||
.mat-mdc-form-field {
|
||||
&:not(.mat-form-field-invalid) {
|
||||
&.mat-focused {
|
||||
.mat-icon {
|
||||
color: var(--pi-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(.mat-form-field-invalid):not(.mat-focused) {
|
||||
.mat-icon {
|
||||
color: var(--pi-color-grey-300);
|
||||
}
|
||||
}
|
||||
&.mat-form-field-invalid {
|
||||
.mat-icon {
|
||||
color: var(--pi-color-warn);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.mat-mdc-form-field-input-control {
|
||||
font: {
|
||||
family: 'Soehne', Helvetica, Arial, sans-serif !important;
|
||||
weight: 300;
|
||||
}
|
||||
}
|
||||
.mdc-text-field {
|
||||
.mdc-floating-label {
|
||||
font: {
|
||||
family: 'Soehne', Helvetica, Arial, sans-serif !important;
|
||||
weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mdc-text-field--disabled {
|
||||
.mdc-floating-label {
|
||||
color: var(--pi-color-grey-300);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pi-shell,
|
||||
.cdk-overlay-container {
|
||||
// Cell Fields
|
||||
.pi-grid-item {
|
||||
.pi-cell {
|
||||
.pi-field {
|
||||
width: 100%;
|
||||
.mat-mdc-form-field {
|
||||
// Fill
|
||||
&.mat-form-field-appearance-fill {
|
||||
.mat-mdc-form-field-underline {
|
||||
transform: translateY(calc(var(--pi-spacing-medium) + var(--pi-spacing-xxx-small)));
|
||||
}
|
||||
|
||||
input {
|
||||
&.mat-mdc-input-element {
|
||||
height: var(--pi-spacing-xxx-large);
|
||||
margin-top: unset;
|
||||
text-align: right !important;
|
||||
}
|
||||
}
|
||||
.mat-mdc-form-field-icon-prefix,
|
||||
.mat-mdc-form-field-icon-suffix {
|
||||
transform: translateY(var(--pi-spacing-xx-small));
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(.pi-form-field__incremental) {
|
||||
input {
|
||||
&.mat-mdc-input-element {
|
||||
transform: translateY(var(--pi-spacing-medium));
|
||||
}
|
||||
}
|
||||
}
|
||||
&.pi-form-field__incremental {
|
||||
.mat-mdc-form-field {
|
||||
// Fill
|
||||
&.mat-form-field-appearance-fill {
|
||||
.mat-mdc-form-field-infix {
|
||||
min-height: unset;
|
||||
}
|
||||
input {
|
||||
&.mat-mdc-input-element {
|
||||
transform: translateY(var(--pi-spacing-xx-small));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pi-text-viewer__font-weight--600 {
|
||||
height: calc(var(--pi-spacing-xxxx-large) - 0.0625rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cdk-overlay-container,
|
||||
html {
|
||||
// Mobile & Tablet
|
||||
&:not(.is-desktop) {
|
||||
// Small device
|
||||
@media screen and (max-width: 62rem) {
|
||||
.pi-shell,
|
||||
.cdk-overlay-container {
|
||||
// Cell Fields
|
||||
.pi-grid-item {
|
||||
.pi-cell {
|
||||
.pi-field {
|
||||
.mat-mdc-form-field {
|
||||
.mat-mdc-form-field-flex {
|
||||
min-height: 3.25rem;
|
||||
}
|
||||
// Fill
|
||||
&.mat-form-field-appearance-fill {
|
||||
.mat-mdc-form-field-underline {
|
||||
transform: translateY(
|
||||
calc(var(--pi-spacing-medium) + var(--pi-spacing-xxx-small))
|
||||
);
|
||||
}
|
||||
|
||||
input {
|
||||
&.mat-mdc-input-element {
|
||||
height: var(--pi-spacing-xxx-large);
|
||||
margin-top: unset;
|
||||
text-align: right !important;
|
||||
font: {
|
||||
size: var(--pi-font-size-x-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.is-mobile) {
|
||||
.pi-shell,
|
||||
.cdk-overlay-container {
|
||||
// Cell Fields
|
||||
.pi-grid-item {
|
||||
.pi-cell {
|
||||
.pi-field {
|
||||
.mat-mdc-form-field {
|
||||
// Fill
|
||||
&.mat-form-field-appearance-fill {
|
||||
.mat-mdc-text-field-wrapper {
|
||||
margin-left: var(--pi-spacing-xx-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(.pi-form-field__incremental) {
|
||||
.mat-mdc-form-field {
|
||||
// Fill
|
||||
&.mat-form-field-appearance-fill {
|
||||
.mat-mdc-text-field-wrapper {
|
||||
max-width: calc(100% - var(--pi-spacing-xx-large));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pi-text-viewer__font-weight--600 {
|
||||
padding-left: var(--pi-spacing-x-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
@forward 'pi-field-incremental';
|
||||
@forward 'pi-field-password';
|
||||
@forward 'pi-field-textarea';
|
||||
@forward 'pi-field';
|
||||
32
libs/ui/src/lib/styles/common/index.scss
Normal file
32
libs/ui/src/lib/styles/common/index.scss
Normal file
@@ -0,0 +1,32 @@
|
||||
@use 'abstracts' as *;
|
||||
@use 'base' as *;
|
||||
@use 'components' as *;
|
||||
@use 'layouts' as *;
|
||||
@use 'vendors' as *;
|
||||
@use 'wrappers' as *;
|
||||
|
||||
@use '@angular/material' as mat;
|
||||
@include mat.checkbox-density(0);
|
||||
|
||||
// TODO: Change import file after checking with Daniel
|
||||
@import '@typeform/embed/build/css/widget.css';
|
||||
@import '@typeform/embed/build/css/popup.css';
|
||||
|
||||
@include mat.core();
|
||||
|
||||
// Palette
|
||||
$pi-palette-accent: mat.define-palette($pi-color-theme-accent);
|
||||
$pi-palette-primary: mat.define-palette($pi-color-theme-primary);
|
||||
$pi-palette-warn: mat.define-palette($pi-color-theme-warn);
|
||||
// Theme
|
||||
$pi-theme: mat.define-light-theme(
|
||||
(
|
||||
color: (
|
||||
accent: $pi-palette-accent,
|
||||
primary: $pi-palette-primary,
|
||||
warn: $pi-palette-warn,
|
||||
),
|
||||
density: 0,
|
||||
)
|
||||
);
|
||||
@include mat.all-component-themes($pi-theme);
|
||||
921
libs/ui/src/lib/styles/common/layouts/_pi-09-pricing-layout.scss
Normal file
921
libs/ui/src/lib/styles/common/layouts/_pi-09-pricing-layout.scss
Normal file
@@ -0,0 +1,921 @@
|
||||
// Shine hover effect
|
||||
@mixin layoutPricingButtonsShineHoverEffect {
|
||||
// Hover shine effect
|
||||
&:not(.pi-button__appearance--ghost):not(.pi-button__type--menu-item) {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: 0;
|
||||
bottom: -50%;
|
||||
left: -50%;
|
||||
transform: rotateZ(75deg) translate(-5rem, 7.5rem);
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(229, 172, 142, 0),
|
||||
rgba(255, 255, 255, 0.25) 50%,
|
||||
rgba(229, 172, 142, 0)
|
||||
);
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
&::after {
|
||||
animation: sheen 0.75s forwards;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translate(0, -0.125rem);
|
||||
box-shadow: 0px 0px 0px white;
|
||||
-webkit-box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.25);
|
||||
-moz-box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.25);
|
||||
box-shadow: inset -0.125rem -0.125rem -0.125rem rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
@keyframes sheen {
|
||||
100% {
|
||||
transform: rotateZ(30deg) translate(1rem, -9rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin billingCycleContentColor($text-color, $theming-color-light, $theming-color) {
|
||||
color: var(--pi-color-#{$text-color});
|
||||
background-color: var(--pi-color-#{$theming-color});
|
||||
border-color: var(--pi-color-#{$theming-color});
|
||||
&:hover {
|
||||
background-image: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin pricingLayoutDiscountChip(
|
||||
$border-color: var(--pi-color-grey-50),
|
||||
$label-color: var(--pi-color-grey-900),
|
||||
$background-color: var(--pi-gradient-grey-light)
|
||||
) {
|
||||
& > span {
|
||||
& > label {
|
||||
color: $label-color;
|
||||
}
|
||||
}
|
||||
border: 1px solid;
|
||||
border-color: $border-color;
|
||||
background: $background-color;
|
||||
}
|
||||
|
||||
@mixin pricingLayoutGrid(
|
||||
$grid-template-columns--regular-cards: repeat(3, 1fr),
|
||||
$grid-template-columns--sticky-cards: 1fr 3fr
|
||||
) {
|
||||
.pi-layout {
|
||||
&.pi-layout__09-pricing {
|
||||
// Pricing cards section
|
||||
& > *:nth-child(2) {
|
||||
display: grid;
|
||||
grid-template-columns: $grid-template-columns--regular-cards;
|
||||
}
|
||||
// Feature cards section
|
||||
& > *:nth-child(4) {
|
||||
// Sticky pricing card headers
|
||||
& > div {
|
||||
&:first-child {
|
||||
& > *:nth-child(1) {
|
||||
display: grid;
|
||||
grid-template-columns: $grid-template-columns--sticky-cards;
|
||||
align-items: end;
|
||||
grid-gap: var(--pi-spacing-medium);
|
||||
|
||||
& > *:nth-child(2) {
|
||||
display: grid;
|
||||
grid-template-columns: $grid-template-columns--regular-cards;
|
||||
gap: var(--pi-spacing-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Feature card wrapper
|
||||
& > div {
|
||||
&:last-child {
|
||||
display: grid;
|
||||
grid-template-columns: $grid-template-columns--regular-cards;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin checkIconBackgroundColor($background-color: var(--pi-color-grey-50)) {
|
||||
.pi-icon {
|
||||
&.pi-icon__border-radius--large {
|
||||
&.pi-icon__appearance--fill {
|
||||
background-color: $background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin cardInternalBorders($border-color: var(--pi-color-grey-50)) {
|
||||
.pi-card-content__bottom {
|
||||
border-top: 1px solid;
|
||||
border-color: $border-color;
|
||||
}
|
||||
.pi-list-item {
|
||||
&.pi-list-item__border--footer {
|
||||
border-color: $border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin pricingCardContentColor($color, $button-text-color, $button-gradient) {
|
||||
color: var(--pi-color-#{$color});
|
||||
border: 1px solid;
|
||||
border-color: var(--pi-color-#{$color}-75);
|
||||
// Card content
|
||||
.pi-card-content {
|
||||
// Content Center
|
||||
&.pi-card-content__center {
|
||||
.pi-text-viewer {
|
||||
label,
|
||||
span {
|
||||
color: var(--pi-color-#{$color});
|
||||
}
|
||||
}
|
||||
}
|
||||
// Content Bottom
|
||||
&.pi-card-content__bottom {
|
||||
button {
|
||||
color: var(--pi-color-#{$button-text-color});
|
||||
background-image: var(--pi-gradient-#{$button-gradient});
|
||||
@include layoutPricingButtonsShineHoverEffect;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin companyPricing {
|
||||
.pi-layout {
|
||||
&.pi-layout__09-pricing {
|
||||
fieldset {
|
||||
.pi-list-item {
|
||||
&.is-active {
|
||||
@include billingCycleContentColor(primary-900, primary, primary-100);
|
||||
}
|
||||
&:hover {
|
||||
&:not(.is-active) {
|
||||
@include billingCycleContentColor(primary, primary, primary-50);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pi-card {
|
||||
&.pi-color__primary {
|
||||
&.pi-color__mode--light {
|
||||
@include checkIconBackgroundColor(var(--pi-color-primary-50));
|
||||
@include cardInternalBorders(var(--pi-color-primary-200));
|
||||
@include pricingCardContentColor(primary, white, primary-dark);
|
||||
}
|
||||
&.pi-color__mode--dark {
|
||||
@include checkIconBackgroundColor(var(--pi-color-primary-400));
|
||||
@include cardInternalBorders(var(--pi-color-white));
|
||||
@include pricingCardContentColor(white, primary, primary-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin investorPricing {
|
||||
.pi-layout {
|
||||
&.pi-layout__09-pricing {
|
||||
fieldset {
|
||||
.pi-list-item {
|
||||
&.is-active {
|
||||
@include billingCycleContentColor(accent-900, accent, accent-100);
|
||||
}
|
||||
&:hover {
|
||||
&:not(.is-active) {
|
||||
@include billingCycleContentColor(accent, accent, accent-50);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pi-card {
|
||||
&.pi-color__accent {
|
||||
&.pi-color__mode--light {
|
||||
@include checkIconBackgroundColor(var(--pi-color-accent-50));
|
||||
@include cardInternalBorders(var(--pi-color-accent-200));
|
||||
@include pricingCardContentColor(accent, white, accent-dark);
|
||||
}
|
||||
&.pi-color__mode--dark {
|
||||
@include checkIconBackgroundColor(var(--pi-color-accent-300));
|
||||
@include cardInternalBorders(var(--pi-color-white));
|
||||
@include pricingCardContentColor(white, accent-900, accent-light);
|
||||
// Bottom
|
||||
.pi-card-content__bottom {
|
||||
& > div {
|
||||
& > span {
|
||||
color: var(--pi-color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin pricingLayoutSpacings($bottom-blocks-top-spacing, $bottom-blocks-height) {
|
||||
.pi-layout {
|
||||
&.pi-layout__09-pricing {
|
||||
& > *:nth-child(4) {
|
||||
// Feature card wrapper
|
||||
& > div {
|
||||
&:last-child {
|
||||
.pi-card {
|
||||
margin: #{$bottom-blocks-top-spacing} auto auto auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pi-card {
|
||||
.pi-card-content__center {
|
||||
& > article {
|
||||
&:nth-child(n + 2) {
|
||||
margin-top: calc(#{$bottom-blocks-top-spacing} + 2 * var(--pi-spacing-xx-large));
|
||||
}
|
||||
& > .pi-list-item {
|
||||
height: calc(#{$bottom-blocks-height} + 2 * var(--pi-spacing-small));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin advisorPricing {
|
||||
.pi-layout {
|
||||
&.pi-layout__09-pricing {
|
||||
fieldset {
|
||||
.pi-list-item {
|
||||
&.is-active {
|
||||
@include billingCycleContentColor(highlighted-900, highlighted, highlighted-100);
|
||||
}
|
||||
&:hover {
|
||||
&:not(.is-active) {
|
||||
@include billingCycleContentColor(highlighted, highlighted, highlighted-50);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pi-card {
|
||||
&.pi-color__highlighted {
|
||||
&.pi-color__mode--light {
|
||||
@include checkIconBackgroundColor(var(--pi-color-highlighted-50));
|
||||
@include cardInternalBorders(var(--pi-color-highlighted-100));
|
||||
@include pricingCardContentColor(highlighted, white, highlighted-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin pricingLayoutWidth($container-width: calc(100% - var(--pi-spacing-xx-large))) {
|
||||
.pi-layout {
|
||||
&.pi-layout__09-pricing {
|
||||
max-width: $container-width;
|
||||
margin: auto;
|
||||
& > *:nth-child(4) {
|
||||
& > *:nth-child(1) {
|
||||
& > header {
|
||||
max-width: $container-width;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pi-layout {
|
||||
&.pi-layout__09-pricing {
|
||||
// Billing cycle selector
|
||||
& > *:nth-child(1) {
|
||||
& > *:nth-child(2) {
|
||||
margin-top: var(--pi-spacing-xx-large);
|
||||
& > * {
|
||||
&:last-child {
|
||||
margin-top: var(--pi-spacing-x-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fieldset {
|
||||
.pi-list-item {
|
||||
&:not(.is-active) {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.pi-list-item-content__right {
|
||||
flex: unset;
|
||||
.pi-chip {
|
||||
min-width: unset;
|
||||
&.pi-chip__appearance--fill {
|
||||
max-height: 1.8125rem;
|
||||
height: unset;
|
||||
padding: var(--pi-spacing-x-small) var(--pi-spacing-xx-small);
|
||||
&.pi-color__grey {
|
||||
@include pricingLayoutDiscountChip;
|
||||
}
|
||||
&.pi-color__accent {
|
||||
@include pricingLayoutDiscountChip(
|
||||
var(--pi-color-accent-200),
|
||||
var(--pi-color-white),
|
||||
var(--pi-gradient-accent-dark)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Pricing cards section
|
||||
& > *:nth-child(2) {
|
||||
.pi-card {
|
||||
// Center
|
||||
.pi-card-content__center {
|
||||
min-height: 6rem;
|
||||
margin-top: var(--pi-spacing-x-large);
|
||||
padding: 0 var(--pi-spacing-xx-small);
|
||||
& > *:nth-child(n + 2) {
|
||||
margin-top: var(--pi-spacing-small);
|
||||
}
|
||||
}
|
||||
// Bottom
|
||||
.pi-card-content__bottom {
|
||||
margin-top: var(--pi-spacing-x-large);
|
||||
padding-top: var(--pi-spacing-x-large);
|
||||
text-align: center;
|
||||
& > div {
|
||||
& > span {
|
||||
color: var(--pi-color-accent);
|
||||
}
|
||||
}
|
||||
button {
|
||||
margin-top: var(--pi-spacing-x-large);
|
||||
}
|
||||
}
|
||||
// Card grey
|
||||
&.pi-color__grey {
|
||||
// Mode Light
|
||||
&.pi-color__mode--light {
|
||||
// Footer
|
||||
.pi-card-content__bottom {
|
||||
border-color: var(--pi-color-grey-100);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
& > *:nth-child(4) {
|
||||
// Feature card wrapper
|
||||
& > div {
|
||||
&:last-child {
|
||||
width: 100%;
|
||||
gap: var(--pi-spacing-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Default mode card
|
||||
.pi-card {
|
||||
&.pi-color__grey {
|
||||
&.pi-color__mode--light {
|
||||
@include checkIconBackgroundColor;
|
||||
@include cardInternalBorders(var(--pi-color-grey-100));
|
||||
@include pricingCardContentColor(grey, white, grey-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-company {
|
||||
@include companyPricing;
|
||||
}
|
||||
|
||||
.is-investor {
|
||||
@include investorPricing;
|
||||
}
|
||||
.is-advisor {
|
||||
@include advisorPricing;
|
||||
}
|
||||
|
||||
html {
|
||||
// Mobile
|
||||
&.is-mobile {
|
||||
@include pricingLayoutWidth;
|
||||
.pi-layout {
|
||||
&.pi-layout__09-pricing {
|
||||
max-width: calc(100% - var(--pi-spacing-xx-large));
|
||||
margin: auto;
|
||||
& > *:nth-child(1) {
|
||||
fieldset + fieldset {
|
||||
margin-top: var(--pi-spacing-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile & Tablet
|
||||
&:not(.is-desktop) {
|
||||
.pi-layout {
|
||||
&.pi-layout__09-pricing {
|
||||
& > *:nth-child(1) {
|
||||
.pi-text-viewer {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
& > *:nth-child(2) {
|
||||
margin-top: var(--pi-spacing-xx-large);
|
||||
}
|
||||
// Features
|
||||
& > *:nth-child(3),
|
||||
& > *:nth-child(4) {
|
||||
display: none;
|
||||
}
|
||||
.pi-main-wrapper-content.is-sticky {
|
||||
width: calc(100% + 3rem);
|
||||
margin-left: -1.5rem;
|
||||
padding: var(--pi-spacing-x-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Small device
|
||||
@media screen and (max-width: 62rem) {
|
||||
.pi-layout {
|
||||
&.pi-layout__09-pricing {
|
||||
// Pricing cards section
|
||||
& > *:nth-child(2) {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
align-items: center;
|
||||
gap: var(--pi-spacing-xx-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tablet
|
||||
&.is-tablet {
|
||||
@include pricingLayoutWidth(calc(100% - 3rem));
|
||||
.pi-layout {
|
||||
&.pi-layout__09-pricing {
|
||||
& > *:nth-child(1) {
|
||||
& > *:nth-child(2) {
|
||||
display: flex;
|
||||
gap: var(--pi-spacing-medium);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: var(--pi-spacing-x-large);
|
||||
padding-right: var(--pi-spacing-x-large);
|
||||
fieldset {
|
||||
max-width: 16rem;
|
||||
|
||||
.pi-list-item {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-areas:
|
||||
'item1 item2'
|
||||
'item3 .';
|
||||
height: 6.6rem;
|
||||
box-shadow: var(--pi-box-shadow-panel);
|
||||
.pi-list-item-icon__left {
|
||||
grid-area: item1;
|
||||
.pi-icon {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
.pi-list-item-content__left {
|
||||
grid-area: item3;
|
||||
}
|
||||
.pi-list-item-content__right {
|
||||
grid-area: item2;
|
||||
text-align: -webkit-right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
& > *:nth-child(2) {
|
||||
gap: var(--pi-spacing-medium);
|
||||
max-width: calc(100% - 3rem);
|
||||
margin: var(--pi-spacing-xx-large) auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Tablet S
|
||||
&.is-tablet__small {
|
||||
.pi-layout {
|
||||
&.pi-layout__09-pricing {
|
||||
// Pricing cards section
|
||||
& > *:nth-child(2) {
|
||||
.pi-card {
|
||||
width: 30.125rem;
|
||||
max-width: 30.125rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tablet & Desktop
|
||||
&:not(.is-mobile) {
|
||||
// Large device
|
||||
@media screen and (min-width: 62rem) {
|
||||
.is-company {
|
||||
@include pricingLayoutGrid;
|
||||
}
|
||||
.is-investor {
|
||||
@include pricingLayoutGrid;
|
||||
}
|
||||
.is-advisor {
|
||||
@include pricingLayoutGrid(repeat(2, 1fr), repeat(1, 1fr 3fr));
|
||||
}
|
||||
.pi-layout {
|
||||
&.pi-layout__09-pricing {
|
||||
// Pricing cards section
|
||||
& > *:nth-child(2) {
|
||||
.pi-card {
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Desktop
|
||||
&.is-desktop {
|
||||
// Desktop S & M
|
||||
&:not(.is-desktop__large) {
|
||||
@include pricingLayoutWidth(var(--pi-public-width-container));
|
||||
}
|
||||
// Desktop L
|
||||
&.is-desktop__large {
|
||||
@include pricingLayoutWidth(var(--pi-public-width-container-l));
|
||||
}
|
||||
.pi-layout {
|
||||
&.pi-layout__09-pricing {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 3fr;
|
||||
grid-column-gap: var(--pi-spacing-medium);
|
||||
grid-row-gap: var(--pi-spacing-xx-large);
|
||||
margin: 0 auto;
|
||||
// Billing cycle selector
|
||||
& > *:nth-child(1) {
|
||||
& > *:nth-child(2) {
|
||||
fieldset + fieldset {
|
||||
margin-top: var(--pi-spacing-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Pricing cards section
|
||||
& > *:nth-child(2) {
|
||||
gap: var(--pi-spacing-small);
|
||||
}
|
||||
// Features per phase
|
||||
& > *:nth-child(3) {
|
||||
// List of features inside each phase
|
||||
article {
|
||||
& > .pi-list-item {
|
||||
height: calc(4.65rem + 2 * var(--pi-spacing-small));
|
||||
}
|
||||
}
|
||||
}
|
||||
& > *:nth-child(4) {
|
||||
// Sticky pricing card headers
|
||||
& > div {
|
||||
&:first-child {
|
||||
gap: var(--pi-spacing-small);
|
||||
transition: var(--pi-animation);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
&.is-visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
background-color: rgba($color: white, $alpha: 0.66);
|
||||
@include cardInternalBorders(transparent);
|
||||
.pi-card {
|
||||
gap: var(--pi-spacing-x-small);
|
||||
.pi-card-content__top {
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--pi-spacing-xx-small);
|
||||
align-items: baseline;
|
||||
width: -webkit-fill-available;
|
||||
padding-left: var(--pi-spacing-x-small);
|
||||
padding-right: var(--pi-spacing-x-small);
|
||||
.pi-text-viewer {
|
||||
article {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(.is-visible) {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
padding-bottom: var(--pi-spacing-xx-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Feature card wrapper
|
||||
& > div {
|
||||
&:last-child {
|
||||
width: 100%;
|
||||
gap: var(--pi-spacing-small);
|
||||
.pi-card {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pi-card {
|
||||
min-height: unset;
|
||||
.pi-card-content__center {
|
||||
margin-top: 0;
|
||||
& > article {
|
||||
& > .pi-list-item {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Top
|
||||
.pi-card-content__top {
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
gap: var(--pi-spacing-small);
|
||||
.pi-icon {
|
||||
&.pi-icon__type--custom {
|
||||
padding: var(--pi-spacing-xx-small);
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
font: {
|
||||
size: var(--pi-font-size-x-large);
|
||||
weight: 700;
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
font: {
|
||||
size: var(--pi-font-size-small);
|
||||
weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Center
|
||||
.pi-card-content__center {
|
||||
padding: 0 var(--pi-spacing-xx-small);
|
||||
& > *:nth-child(n + 2) {
|
||||
margin-top: var(--pi-spacing-small);
|
||||
}
|
||||
|
||||
// Footer
|
||||
.pi-card-content__footer {
|
||||
button {
|
||||
width: 100%;
|
||||
font-weight: 300;
|
||||
&:not(.mdc-switch):not(.pi-button__toggle) {
|
||||
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__xx-small):not(
|
||||
.pi-button__x-large
|
||||
):not(.pi-button__toggle):not(.pi-button__trimmed) {
|
||||
height: var(--pi-spacing-xxxx-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Demo
|
||||
&.pi-color__grey {
|
||||
// Mode Light
|
||||
&.pi-color__mode--light {
|
||||
// Top
|
||||
.pi-card-content__top {
|
||||
h4 {
|
||||
color: var(--pi-color-grey-300);
|
||||
}
|
||||
}
|
||||
// Center
|
||||
.pi-card-content__center {
|
||||
.pi-text-viewer {
|
||||
label,
|
||||
span {
|
||||
color: var(--pi-color-grey-900);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Footer
|
||||
.pi-card-content__footer {
|
||||
border-color: var(--pi-color-grey-100);
|
||||
}
|
||||
|
||||
button {
|
||||
color: var(--pi-color-white);
|
||||
background-color: var(--pi-color-grey-900);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Company pricing
|
||||
&.pi-color__primary {
|
||||
// Basic plan
|
||||
&.pi-color__mode--light {
|
||||
color: var(--pi-color-primary);
|
||||
// Header
|
||||
.pi-card-content__header {
|
||||
h4 {
|
||||
color: var(--pi-color-primary-300);
|
||||
}
|
||||
}
|
||||
// Center
|
||||
.pi-card-content__center {
|
||||
.pi-text-viewer {
|
||||
label,
|
||||
span {
|
||||
color: var(--pi-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
color: var(--pi-color-white);
|
||||
background: var(--pi-gradient-primary-500-900);
|
||||
}
|
||||
}
|
||||
// Premium plan
|
||||
&.pi-color__mode--dark {
|
||||
color: var(--pi-color-white);
|
||||
// Center
|
||||
.pi-card-content__center {
|
||||
.pi-text-viewer {
|
||||
label,
|
||||
span {
|
||||
color: var(--pi-color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
color: var(--pi-color-primary-1000);
|
||||
background-color: var(--pi-color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Investor pricing
|
||||
&.pi-color__accent {
|
||||
// Basic plan
|
||||
&.pi-color__mode--light {
|
||||
color: var(--pi-color-accent);
|
||||
// Top
|
||||
.pi-card-content__top {
|
||||
h4 {
|
||||
color: var(--pi-color-accent-300);
|
||||
}
|
||||
}
|
||||
// Center
|
||||
.pi-card-content__center {
|
||||
.pi-text-viewer {
|
||||
label,
|
||||
span {
|
||||
color: var(--pi-color-accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
.pi-card-content__bottom {
|
||||
button {
|
||||
color: var(--pi-color-white);
|
||||
background-image: var(--pi-gradient-accent-200-300);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Premium plan
|
||||
&.pi-color__mode--dark {
|
||||
color: var(--pi-color-white);
|
||||
// Center
|
||||
.pi-card-content__center {
|
||||
.pi-text-viewer {
|
||||
label,
|
||||
span {
|
||||
color: var(--pi-color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
color: var(--pi-color-accent);
|
||||
background: var(--pi-color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Advisor pricing
|
||||
&.pi-color__highlighted {
|
||||
// Basic plan
|
||||
&.pi-color__mode--light {
|
||||
color: var(--pi-color-highlighted);
|
||||
// Top
|
||||
.pi-card-content__top {
|
||||
h4 {
|
||||
color: var(--pi-color-highlighted-300);
|
||||
}
|
||||
}
|
||||
// Center
|
||||
.pi-card-content__center {
|
||||
.pi-text-viewer {
|
||||
label,
|
||||
span {
|
||||
color: var(--pi-color-highlighted);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
color: var(--pi-color-white);
|
||||
background: var(--pi-gradient-highlighted-300-500);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.pi-color__grey {
|
||||
.pi-card-content__center {
|
||||
.pi-list-item {
|
||||
.pi-icon {
|
||||
.mat-icon {
|
||||
color: var(--pi-color-grey-400);
|
||||
}
|
||||
}
|
||||
border-color: var(--pi-color-grey-100);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.pi-color__mode--dark {
|
||||
.pi-card-content__center {
|
||||
.pi-list-item {
|
||||
.pi-icon {
|
||||
.mat-icon {
|
||||
color: var(--pi-color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Advisor
|
||||
.is-advisor {
|
||||
@include pricingLayoutSpacings(3.25rem, 4.65rem);
|
||||
}
|
||||
// Investor & Company
|
||||
.is-investor,
|
||||
.is-company {
|
||||
@include pricingLayoutSpacings(4.0125rem, 4.65rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
@mixin containerWidth($width: calc(100% - var(--pi-spacing-xx-large)), $no-padding-width: 100%) {
|
||||
.pi-shell {
|
||||
&.pi-shell__deale-website {
|
||||
.pi-container-layout {
|
||||
.pi-layout {
|
||||
&:not(.pi-layout__06-edge-to-edge):not(.pi-layout__09-pricing) {
|
||||
& > *:nth-child(n + 1) {
|
||||
width: $width;
|
||||
max-width: $width;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
&.pi-layout__06-edge-to-edge {
|
||||
max-width: -webkit-fill-available;
|
||||
}
|
||||
&.pi-layout__09-pricing + .pi-layout,
|
||||
&.pi-layout + .pi-layout__09-pricing {
|
||||
& > *:nth-child(n + 1) {
|
||||
max-width: $no-padding-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pi-container-layout {
|
||||
display: block;
|
||||
}
|
||||
|
||||
html {
|
||||
// Mobile
|
||||
&.is-mobile {
|
||||
@include containerWidth;
|
||||
}
|
||||
|
||||
// Tablet
|
||||
&.is-tablet {
|
||||
// Tablet S
|
||||
&.is-tablet__small {
|
||||
@include containerWidth(calc(100% - 3rem), 100%);
|
||||
}
|
||||
// Tablet L
|
||||
&.is-tablet__large {
|
||||
@include containerWidth(calc(100% - var(--pi-spacing-xxxx-large)), 100%);
|
||||
}
|
||||
}
|
||||
|
||||
// Desktop
|
||||
&.is-desktop {
|
||||
// Desktop S & M
|
||||
&:not(.is-desktop__large) {
|
||||
@include containerWidth(var(--pi-public-width-container), var(--pi-public-width-container));
|
||||
}
|
||||
// Desktop L
|
||||
&.is-desktop__large {
|
||||
@include containerWidth(
|
||||
var(--pi-public-width-container-l),
|
||||
var(--pi-public-width-container-l)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
65
libs/ui/src/lib/styles/common/layouts/_pi-layout.scss
Normal file
65
libs/ui/src/lib/styles/common/layouts/_pi-layout.scss
Normal file
@@ -0,0 +1,65 @@
|
||||
@mixin layoutHeights(
|
||||
$small-height: 33.33vh,
|
||||
$medium-height: 40vh,
|
||||
$large-height: 75vh,
|
||||
$full-height: 100vh
|
||||
) {
|
||||
.pi-container-layout {
|
||||
.pi-layout {
|
||||
// 33.33vh
|
||||
&.pi-layout__small {
|
||||
min-height: $small-height;
|
||||
}
|
||||
// 33.33vh
|
||||
&.pi-layout__medium {
|
||||
min-height: $medium-height;
|
||||
}
|
||||
// 75vh
|
||||
&.pi-layout__large {
|
||||
min-height: $large-height;
|
||||
}
|
||||
// 100vh
|
||||
&.pi-layout__full {
|
||||
min-height: $full-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pi-container-layout {
|
||||
.pi-layout {
|
||||
display: block;
|
||||
background-size: cover;
|
||||
|
||||
& > .pi-background-image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
& > *:nth-child(-2n + 2) {
|
||||
margin-top: var(--pi-spacing-xx-large);
|
||||
}
|
||||
|
||||
& > *:nth-child(n + 2) {
|
||||
margin-top: var(--pi-spacing-large);
|
||||
}
|
||||
|
||||
&.pi-layout__no-padding {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
// Mobile
|
||||
&.is-mobile {
|
||||
@include layoutHeights;
|
||||
}
|
||||
// Tablet
|
||||
&.is-tablet {
|
||||
@include layoutHeights(30vh, 40vh, 66.66vh, 100vh);
|
||||
}
|
||||
// Desktop
|
||||
&.is-desktop {
|
||||
@include layoutHeights(33.33vh, 50vh, 62vh, 100vh);
|
||||
}
|
||||
}
|
||||
3
libs/ui/src/lib/styles/common/layouts/index.scss
Normal file
3
libs/ui/src/lib/styles/common/layouts/index.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
@forward 'pi-09-pricing-layout';
|
||||
@forward 'pi-container-layout';
|
||||
@forward 'pi-layout';
|
||||
271
libs/ui/src/lib/styles/common/vendors/_ch2-button.scss
vendored
Normal file
271
libs/ui/src/lib/styles/common/vendors/_ch2-button.scss
vendored
Normal file
@@ -0,0 +1,271 @@
|
||||
.ch2 {
|
||||
.ch2-settings-scan {
|
||||
.ch2-settings-tabs {
|
||||
height: 3.3125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ch2-theme-bar {
|
||||
.ch2-dialog {
|
||||
overflow-x: hidden;
|
||||
padding: var(--pi-spacing-x-large);
|
||||
}
|
||||
}
|
||||
// Override wrong primary
|
||||
.ch2-style-light,
|
||||
.ch2-style-dark {
|
||||
.ch2-btn-primary {
|
||||
all: unset;
|
||||
min-width: 4.125rem;
|
||||
text-align: center;
|
||||
&:hover {
|
||||
background: unset;
|
||||
box-shadow: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
button:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single) {
|
||||
&.ch2-btn {
|
||||
min-height: var(--pi-spacing-xxx-large) !important;
|
||||
&:not(.ch2-btn-primary) {
|
||||
padding: var(--pi-spacing-xxxx-small) 0;
|
||||
}
|
||||
&.ch2-btn-primary {
|
||||
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ch2-btn {
|
||||
border: 0;
|
||||
padding: var(--pi-spacing-xxxx-small) 0;
|
||||
font-size: 15px;
|
||||
letter-spacing: unset;
|
||||
text-transform: unset;
|
||||
min-height: unset !important;
|
||||
box-shadow: unset;
|
||||
&:hover {
|
||||
box-shadow: unset;
|
||||
}
|
||||
&.ch2-btn-secondary {
|
||||
&.ch2-allow-all-btn {
|
||||
background-color: var(--pi-color-primary);
|
||||
&:hover {
|
||||
background-color: var(--pi-color-primary-900);
|
||||
}
|
||||
}
|
||||
&.ch2-deny-all-btn {
|
||||
background-color: var(--pi-color-warn);
|
||||
&:hover {
|
||||
background-color: var(--pi-color-warn-900);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ch2-btn + .ch2-btn {
|
||||
margin-left: var(--pi-spacing-x-small);
|
||||
}
|
||||
|
||||
.ch2-btn-primary {
|
||||
&.ch2-deny-all-btn {
|
||||
color: var(--pi-color-warn);
|
||||
background-color: transparent;
|
||||
text-decoration: underline;
|
||||
&:hover {
|
||||
&:enabled {
|
||||
color: var(--pi-color-warn-900);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.ch2-allow-all-btn {
|
||||
width: 9rem;
|
||||
color: var(--pi-color-white);
|
||||
background-color: var(--pi-color-primary);
|
||||
&:hover {
|
||||
&:enabled {
|
||||
background-color: var(--pi-color-primary-900);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ch2-style-light {
|
||||
.ch2-btn-secondary {
|
||||
&:hover {
|
||||
background: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ch2-btn-text {
|
||||
color: var(--pi-color-black);
|
||||
background-color: transparent;
|
||||
text-decoration: underline;
|
||||
&:hover {
|
||||
&:enabled {
|
||||
color: var(--pi-color-black);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
&:disabled {
|
||||
color: rgba($color: #3d3d3d, $alpha: 0.6);
|
||||
}
|
||||
}
|
||||
.ch2-icon {
|
||||
display: none;
|
||||
position: fixed;
|
||||
bottom: 2.5rem;
|
||||
left: 2.5rem;
|
||||
z-index: 9999;
|
||||
}
|
||||
.ch2-btn {
|
||||
.ch2-open-settings-btn {
|
||||
.ch2-btn-text {
|
||||
color: var(--pi-color-warn-900);
|
||||
}
|
||||
}
|
||||
}
|
||||
.ch2-theme-bar {
|
||||
.ch2-dialog-actions {
|
||||
@media screen and (min-width: 30rem) {
|
||||
gap: var(--pi-spacing-small);
|
||||
}
|
||||
|
||||
button {
|
||||
&:first-child {
|
||||
margin-right: unset;
|
||||
}
|
||||
&.ch2-btn-text-xxs {
|
||||
font: {
|
||||
size: var(--pi-font-size-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ch2-dialog-actions-vertical {
|
||||
div {
|
||||
gap: var(--pi-spacing-small);
|
||||
&:last-child {
|
||||
button {
|
||||
margin-bottom: unset !important;
|
||||
margin-left: unset;
|
||||
padding: var(--pi-spacing-xx-small) var(--pi-spacing-x-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ch2-settings-content {
|
||||
.ch2-settings-tab-container {
|
||||
& > button {
|
||||
margin-right: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ch2-theme-bar {
|
||||
.ch2-dialog {
|
||||
p {
|
||||
strong {
|
||||
color: var(--pi-color-grey);
|
||||
font: {
|
||||
size: var(--pi-font-size-small);
|
||||
weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ch2-style-light {
|
||||
&.ch2-icon {
|
||||
a {
|
||||
color: var(--pi-color-primary);
|
||||
svg {
|
||||
border: 0.125rem solid var(--pi-color-primary);
|
||||
fill: var(--pi-color-primary);
|
||||
background: var(--pi-color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
.ch2-btn-text {
|
||||
color: var(--pi-color-grey);
|
||||
}
|
||||
.ch2-dialog-description {
|
||||
margin-top: var(--pi-spacing-xxx-small);
|
||||
}
|
||||
.ch2-dialog-content {
|
||||
p {
|
||||
color: var(--pi-color-grey);
|
||||
line-height: 150%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ch2-icon {
|
||||
bottom: 0.375rem;
|
||||
left: 0.375rem;
|
||||
a {
|
||||
font: {
|
||||
size: var(--pi-font-size-small);
|
||||
weight: unset;
|
||||
}
|
||||
text-transform: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.ch2-theme-bar {
|
||||
.ch2-dialog-content {
|
||||
text-align: center;
|
||||
}
|
||||
.ch2-dialog-actions {
|
||||
button {
|
||||
margin-top: unset;
|
||||
}
|
||||
}
|
||||
.ch2-dialog-actions {
|
||||
button {
|
||||
margin-top: unset;
|
||||
}
|
||||
}
|
||||
.ch2-dialog-actions-vertical {
|
||||
display: flex;
|
||||
@media (max-width: 30rem) {
|
||||
flex-direction: column;
|
||||
}
|
||||
& > div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: var(--pi-spacing-large);
|
||||
|
||||
&:nth-child(1) {
|
||||
button {
|
||||
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single) {
|
||||
min-width: unset;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.ch2-theme-bar {
|
||||
.ch2-dialog-actions {
|
||||
margin-top: var(--pi-spacing-xxx-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 700px) {
|
||||
.ch2-theme-bar {
|
||||
.ch2-dialog-actions-vertical {
|
||||
& > div {
|
||||
&:nth-child(2) {
|
||||
justify-content: flex-end;
|
||||
width: -webkit-fill-available;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
177
libs/ui/src/lib/styles/common/vendors/_mat-checkbox.scss
vendored
Normal file
177
libs/ui/src/lib/styles/common/vendors/_mat-checkbox.scss
vendored
Normal file
@@ -0,0 +1,177 @@
|
||||
@mixin checkboxColor($color) {
|
||||
.mat-mdc-checkbox {
|
||||
.mdc-checkbox__native-control {
|
||||
// Colors by state
|
||||
&:enabled {
|
||||
&:not(:checked):not(:indeterminate):not([data-indeterminate='true']) {
|
||||
& ~ .mdc-checkbox__background {
|
||||
border-color: var(--pi-color-#{$color}) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pi-shell,
|
||||
.cdk-overlay-container {
|
||||
.pi-select-option {
|
||||
@include checkboxColor(primary-200);
|
||||
}
|
||||
@include checkboxColor(grey-100);
|
||||
|
||||
// Checkbox
|
||||
.mdc-checkbox__background {
|
||||
border-radius: var(--pi-border-radius-x-small);
|
||||
}
|
||||
.mdc-checkbox__background {
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.mat-mdc-checkbox {
|
||||
&.mat-accent {
|
||||
--mdc-checkbox-selected-checkmark-color: #3d3d3d;
|
||||
--mdc-checkbox-selected-focus-icon-color: #799ef0;
|
||||
--mdc-checkbox-selected-hover-icon-color: #799ef0;
|
||||
--mdc-checkbox-selected-icon-color: #799ef0;
|
||||
--mdc-checkbox-selected-pressed-icon-color: #799ef0;
|
||||
--mdc-checkbox-unselected-focus-icon-color: #3d3d3d;
|
||||
--mdc-checkbox-unselected-hover-icon-color: #3d3d3d;
|
||||
--mdc-checkbox-disabled-selected-icon-color: rgba(196, 213, 255, 0.15);
|
||||
--mdc-checkbox-disabled-unselected-icon-color: rgba(196, 213, 255, 0.15);
|
||||
--mdc-checkbox-unselected-icon-color: rgba(196, 213, 255, 0);
|
||||
--mdc-checkbox-unselected-pressed-icon-color: rgba(196, 213, 255, 0.15);
|
||||
--mdc-checkbox-selected-checkmark-color: rgba(227, 246, 249, 1);
|
||||
}
|
||||
.mdc-checkbox__ripple {
|
||||
background: var(--pi-color-primary-200-rgba);
|
||||
}
|
||||
.mdc-form-field {
|
||||
gap: var(--pi-spacing-xx-small);
|
||||
color: var(--pi-color-black);
|
||||
}
|
||||
.mdc-checkbox {
|
||||
padding: calc(
|
||||
(var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) - 1.125rem) / 2
|
||||
);
|
||||
margin: calc(
|
||||
(
|
||||
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
|
||||
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large))
|
||||
) / 2
|
||||
);
|
||||
.mdc-checkbox__background {
|
||||
top: calc((var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) - 1.125rem) / 2);
|
||||
left: calc(
|
||||
(var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) - 1.125rem) / 2
|
||||
);
|
||||
}
|
||||
.mdc-checkbox__native-control {
|
||||
top: calc(
|
||||
(
|
||||
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
|
||||
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large))
|
||||
) / 2
|
||||
);
|
||||
right: calc(
|
||||
(
|
||||
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
|
||||
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large))
|
||||
) / 2
|
||||
);
|
||||
left: calc(
|
||||
(
|
||||
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large)) -
|
||||
var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large))
|
||||
) / 2
|
||||
);
|
||||
width: var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large));
|
||||
height: var(--mdc-checkbox-state-layer-size, var(--pi-spacing-x-large));
|
||||
|
||||
// Colors by state
|
||||
&:enabled {
|
||||
&:not(:checked):not(:indeterminate):not([data-indeterminate='true']) {
|
||||
& ~ .mdc-checkbox__background {
|
||||
border: 1px solid;
|
||||
}
|
||||
}
|
||||
&:checked {
|
||||
& ~ .mdc-checkbox__background {
|
||||
border-color: var(--pi-color-primary);
|
||||
background-color: var(--pi-color-white);
|
||||
}
|
||||
}
|
||||
& ~ .mdc-checkbox__background {
|
||||
.mdc-checkbox__checkmark {
|
||||
color: var(--pi-color-primary);
|
||||
transform: scale(0.7);
|
||||
.mdc-checkbox__checkmark-path {
|
||||
stroke-width: 0.3125rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.mdc-checkbox__native-control {
|
||||
&:enabled {
|
||||
&:not(:checked):not(:indeterminate):not([data-indeterminate='true']) {
|
||||
& ~ .mdc-checkbox__background {
|
||||
border-color: var(--pi-color-primary);
|
||||
}
|
||||
}
|
||||
&:checked {
|
||||
& ~ .mdc-checkbox__background {
|
||||
border-color: var(--pi-color-primary);
|
||||
background-color: var(--pi-color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Checked
|
||||
&.mat-mdc-checkbox-checked {
|
||||
.mdc-checkbox {
|
||||
background-color: var(--pi-color-primary-50);
|
||||
border-radius: 0.4375rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Pseudo checkbox
|
||||
.mat-pseudo-checkbox {
|
||||
border-radius: var(--pi-border-radius-x-small);
|
||||
}
|
||||
.mat-pseudo-checkbox-full {
|
||||
border: 0.0625rem solid;
|
||||
}
|
||||
.mat-pseudo-checkbox-full {
|
||||
&.mat-pseudo-checkbox-checked {
|
||||
&::after {
|
||||
content: '';
|
||||
top: -2px;
|
||||
height: 0.2188rem;
|
||||
width: 0.4rem;
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -0.25rem;
|
||||
left: -0.25rem;
|
||||
z-index: -1;
|
||||
height: var(--pi-spacing-x-large);
|
||||
width: var(--pi-spacing-x-large);
|
||||
padding: var(--pi-spacing-xxx-small);
|
||||
border-radius: 0.4375rem;
|
||||
border-color: var(--pi-color-primary);
|
||||
background-color: var(--pi-color-primary-50);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-checkbox-ripple,
|
||||
.mdc-checkbox__ripple {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
49
libs/ui/src/lib/styles/common/vendors/_mat-chip.scss
vendored
Normal file
49
libs/ui/src/lib/styles/common/vendors/_mat-chip.scss
vendored
Normal file
@@ -0,0 +1,49 @@
|
||||
.pi-layout {
|
||||
.mat-mdc-chip {
|
||||
&.mat-mdc-standard-chip {
|
||||
color: var(--pi-color-primary);
|
||||
padding: var(--pi-spacing-xx-small) var(--pi-spacing-xxx-small) var(--pi-spacing-xx-small)
|
||||
var(--pi-spacing-medium);
|
||||
gap: var(--pi-spacing-xxxx-small);
|
||||
background-color: transparent;
|
||||
border: 1px solid;
|
||||
border-color: var(--pi-color-primary);
|
||||
.pi-button__icon {
|
||||
max-height: 0.3125rem;
|
||||
figure {
|
||||
width: var(--pi-spacing-small);
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
&::after {
|
||||
opacity: 0;
|
||||
}
|
||||
.pi-button__icon {
|
||||
figure {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
&.pi-button {
|
||||
&.pi-button__primary {
|
||||
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
|
||||
.pi-button__white
|
||||
) {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.mat-mdc-chip-ripple {
|
||||
font: {
|
||||
size: var(--pi-font-size-medium);
|
||||
weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
292
libs/ui/src/lib/styles/common/vendors/_mat-dialog.scss
vendored
Normal file
292
libs/ui/src/lib/styles/common/vendors/_mat-dialog.scss
vendored
Normal file
@@ -0,0 +1,292 @@
|
||||
@mixin mainContentHeight {
|
||||
.pi-modal__main-content {
|
||||
display: block;
|
||||
& > *:first-child {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
// Custom
|
||||
&.pi-modal__main-content--custom-template {
|
||||
& > *:first-child {
|
||||
min-height: 60vh;
|
||||
}
|
||||
}
|
||||
// Dialog
|
||||
&.pi-modal__main-content--dialog-template {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin modalScrollBar {
|
||||
&::-webkit-scrollbar {
|
||||
width: var(--pi-spacing-xxxx-small);
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: rgba($color: #aeaeb6, $alpha: 0.3);
|
||||
border-radius: var(--pi-border-radius-small);
|
||||
&:hover {
|
||||
background-color: darken($color: #aeaeb6, $amount: 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
.cdk-overlay-container,
|
||||
.pi-shell {
|
||||
.mdc-dialog__container {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
border-radius: var(--pi-border-radius-medium);
|
||||
box-shadow: unset;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
.mdc-dialog__surface {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
box-shadow: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pi-modal__panel {
|
||||
.pi-modal {
|
||||
&:not(.pi-modal__custom) {
|
||||
.pi-headline {
|
||||
figure {
|
||||
max-width: 10rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.pi-modal__dialog {
|
||||
.pi-panel__grey {
|
||||
max-width: 75%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.pi-modal__main-content {
|
||||
// Main DIALOG content
|
||||
&.pi-modal__main-content--dialog-template {
|
||||
& > .pi-modal__custom-template {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
& > *:nth-child(1) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--pi-spacing-x-large);
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
@include modalScrollBar;
|
||||
}
|
||||
& > *:nth-child(2) {
|
||||
height: var(--pi-height-footer);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Main CUSTOM content
|
||||
&.pi-modal__main-content--custom-template {
|
||||
& > .pi-modal__custom-template {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
& > *:nth-child(1) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--pi-spacing-x-large);
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
|
||||
@include modalScrollBar;
|
||||
|
||||
& > *:nth-child(n + 1) {
|
||||
padding-left: var(--pi-spacing-x-large);
|
||||
padding-right: var(--pi-spacing-x-large);
|
||||
}
|
||||
}
|
||||
& > *:nth-child(2) {
|
||||
height: 5.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-checkbox-layout {
|
||||
white-space: unset;
|
||||
}
|
||||
// Full
|
||||
&.pi-modal__panel--full {
|
||||
width: 90vw;
|
||||
height: 90vh;
|
||||
.mat-mdc-dialog-container {
|
||||
border-radius: var(--pi-border-radius-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Backdrop
|
||||
.pi-backdrop {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
html {
|
||||
// Mobile
|
||||
&.is-mobile {
|
||||
.pi-modal {
|
||||
& > .pi-headline {
|
||||
gap: var(--pi-spacing-medium);
|
||||
}
|
||||
@include mainContentHeight;
|
||||
}
|
||||
// Panel
|
||||
.pi-modal__panel {
|
||||
// Small | Medium
|
||||
&.pi-modal__panel--small,
|
||||
&.pi-modal__panel--medium {
|
||||
width: 83vw;
|
||||
|
||||
.pi-modal__main-content {
|
||||
// Main CUSTOM content
|
||||
&.pi-modal__main-content--custom-template {
|
||||
& > .pi-modal__custom-template {
|
||||
& > *:nth-child(1) {
|
||||
max-height: calc(85vh - var(--pi-height-footer) - 5rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Action wrapper
|
||||
.pi-wrapper {
|
||||
&.pi-wrapper__action {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
box-shadow: 0 -6px 34px -17px rgba(191, 191, 191, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
.pi-modal__main-content {
|
||||
&.pi-modal__main-content--custom-template {
|
||||
video {
|
||||
max-width: 85%;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tablet
|
||||
&.is-tablet {
|
||||
.pi-modal__panel {
|
||||
@include mainContentHeight;
|
||||
// Small
|
||||
&.pi-modal__panel--small {
|
||||
width: 50vw;
|
||||
}
|
||||
|
||||
// Medium
|
||||
&.pi-modal__panel--medium {
|
||||
width: 70vw;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-tablet__small {
|
||||
.pi-modal__main-content {
|
||||
&.pi-modal__main-content--custom-template {
|
||||
video {
|
||||
max-width: 75%;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tablet & Desktop
|
||||
&:not(.is-mobile) {
|
||||
.pi-modal {
|
||||
// Type Custom
|
||||
&.pi-modal__custom {
|
||||
// Is Closable
|
||||
&.pi-modal__is-closable {
|
||||
}
|
||||
|
||||
// Is Not Closable
|
||||
&:not(.pi-modal__is-closable) {
|
||||
.pi-modal__custom--inner {
|
||||
main {
|
||||
& > *:nth-child(2) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Type Dialog
|
||||
&.pi-modal__dialog {
|
||||
// Is Closable
|
||||
&.pi-modal__is-closable {
|
||||
}
|
||||
// Is Not Closable
|
||||
&:not(.pi-modal__is-closable) {
|
||||
& > main {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Large device
|
||||
@media screen and (min-width: 62rem) {
|
||||
.pi-modal__main-content {
|
||||
&.pi-modal__main-content--custom-template {
|
||||
height: 100%;
|
||||
|
||||
video {
|
||||
max-width: 66.66%;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Desktop
|
||||
&.is-desktop {
|
||||
.pi-modal {
|
||||
// Type Dialog
|
||||
&.pi-modal__dialog {
|
||||
& > main {
|
||||
& > .pi-headline + section {
|
||||
margin-top: var(--pi-spacing-x-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
@include mainContentHeight;
|
||||
}
|
||||
.pi-modal__panel {
|
||||
// Small
|
||||
&.pi-modal__panel--small {
|
||||
width: 28vw;
|
||||
}
|
||||
|
||||
// Medium
|
||||
&.pi-modal__panel--medium {
|
||||
width: 37vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
13
libs/ui/src/lib/styles/common/vendors/_mat-expansion-panel.scss
vendored
Normal file
13
libs/ui/src/lib/styles/common/vendors/_mat-expansion-panel.scss
vendored
Normal file
@@ -0,0 +1,13 @@
|
||||
.pi-shell__deale-saas {
|
||||
.mat-mdc-expansion-panel {
|
||||
&:not([class*='mat-elevation-z']) {
|
||||
box-shadow: unset;
|
||||
}
|
||||
}
|
||||
.mat-mdc-expansion-panel-header {
|
||||
border-bottom: 1px solid var(--pi-color-background-400);
|
||||
}
|
||||
.mat-mdc-expansion-panel-body {
|
||||
padding: var(--pi-spacing-xx-large);
|
||||
}
|
||||
}
|
||||
428
libs/ui/src/lib/styles/common/vendors/_mat-form-field.scss
vendored
Normal file
428
libs/ui/src/lib/styles/common/vendors/_mat-form-field.scss
vendored
Normal file
@@ -0,0 +1,428 @@
|
||||
// Appearance outline
|
||||
@mixin matFormFieldOutline() {
|
||||
// Appearance Outline
|
||||
.mat-form-field-appearance-outline {
|
||||
.mat-mdc-form-field-infix {
|
||||
transform: translateX(-0.75rem);
|
||||
}
|
||||
.mat-mdc-form-field-infix {
|
||||
min-height: unset;
|
||||
}
|
||||
// Focused
|
||||
&.mat-focused {
|
||||
[class*='mdc-notched-outline__'] {
|
||||
max-width: unset;
|
||||
width: var(--pi-spacing-small);
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
// NOT Invalid
|
||||
&:not(.mat-form-field-invalid) {
|
||||
&:not(.mat-focused) {
|
||||
.mat-mdc-form-field-icon-suffix,
|
||||
.mat-mdc-form-field-icon-prefix {
|
||||
color: var(--pi-color-grey-300);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mdc-notched-outline {
|
||||
.mdc-floating-label {
|
||||
height: var(--pi-spacing-xxxx-large);
|
||||
}
|
||||
}
|
||||
.mdc-text-field {
|
||||
&:not(.mat-form-field-no-animations) {
|
||||
.mdc-floating-label {
|
||||
transform: translate(0, -3rem) scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-flex {
|
||||
padding: 0 var(--pi-spacing-small);
|
||||
}
|
||||
|
||||
.mdc-notched-outline__leading {
|
||||
border-radius: 0.875rem 0 0 0.875rem;
|
||||
}
|
||||
.mdc-notched-outline__trailing {
|
||||
border-radius: 0 0.875rem 0.875rem 0;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-label {
|
||||
margin-left: var(--pi-spacing-xxxx-small);
|
||||
margin-right: var(--pi-spacing-xxxx-small);
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-prefix,
|
||||
.mat-mdc-form-field-suffix {
|
||||
top: unset;
|
||||
height: 100%;
|
||||
.pi-icon__small {
|
||||
.mat-icon {
|
||||
height: var(--pi-spacing-x-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-infix {
|
||||
flex: auto;
|
||||
min-width: 0;
|
||||
width: 11.25rem;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
height: var(--pi-spacing-xxxx-large);
|
||||
}
|
||||
|
||||
input {
|
||||
&.mat-mdc-input-element {
|
||||
height: calc(var(--pi-spacing-xxxx-large) - 0.125rem);
|
||||
margin-top: 0.0625rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.mdc-text-field--disabled {
|
||||
.mat-mdc-input-element,
|
||||
.mdc-notched-outline,
|
||||
.mat-icon {
|
||||
color: var(--pi-color-grey-300);
|
||||
}
|
||||
}
|
||||
|
||||
// Invalid
|
||||
&.mat-form-field-invalid {
|
||||
.mat-mdc-form-field-subscript-wrapper {
|
||||
height: var(--pi-spacing-x-large);
|
||||
}
|
||||
}
|
||||
// NOT Invalid
|
||||
&:not(.mat-form-field-invalid) {
|
||||
.mat-mdc-form-field-subscript-wrapper {
|
||||
height: var(--pi-spacing-x-small);
|
||||
}
|
||||
}
|
||||
|
||||
// Outline & default
|
||||
&:not(.mat-focused):not(.mat-form-field-invalid) {
|
||||
&:not(.mdc-text-field--disabled) {
|
||||
[class*='mdc-notched-outline__'] {
|
||||
border-color: var(--pi-color-grey-200);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
&:not(.mdc-text-field--disabled) {
|
||||
[class*='mdc-notched-outline__'] {
|
||||
border-color: var(--pi-color-grey-300);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Outline & Invalid
|
||||
&.mat-focused {
|
||||
&:not(.mdc-text-field--disabled) {
|
||||
[class*='mdc-notched-outline__'] {
|
||||
border-color: var(--pi-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Outline & Invalid
|
||||
&.mat-form-field-invalid {
|
||||
&:not(.mdc-text-field--disabled) {
|
||||
[class*='mdc-notched-outline__'] {
|
||||
border-color: var(--pi-color-warn);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Appearance fill
|
||||
@mixin matFormFieldFill() {
|
||||
.mat-form-field-appearance-fill {
|
||||
.mat-mdc-text-field-wrapper {
|
||||
height: unset;
|
||||
flex: unset;
|
||||
&:not(.mdc-text-field--outlined) {
|
||||
.mat-mdc-form-field-infix {
|
||||
padding-top: unset;
|
||||
padding-bottom: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
// NOT Invalid
|
||||
&:not(.mat-form-field-invalid) {
|
||||
&:not(.mat-focused) {
|
||||
.mat-mdc-form-field-icon-suffix,
|
||||
.mat-mdc-form-field-icon-prefix {
|
||||
color: var(--pi-color-grey-900);
|
||||
}
|
||||
}
|
||||
}
|
||||
.mdc-text-field {
|
||||
padding: unset;
|
||||
}
|
||||
.mat-mdc-form-field-infix {
|
||||
width: 100%;
|
||||
}
|
||||
.mdc-text-field--filled {
|
||||
.mdc-line-ripple {
|
||||
&::after {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&.mdc-text-field--disabled {
|
||||
.mdc-line-ripple {
|
||||
&::before {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mdc-floating-label--float-above {
|
||||
transform: translateY(-100%) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.mdc-text-field--filled {
|
||||
background-color: var(--pi-color-white);
|
||||
&:not(.mdc-text-field--disabled) {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.mdc-text-field--disable {
|
||||
.mdc-line-ripple {
|
||||
background-image: unset;
|
||||
background-size: unset;
|
||||
background-repeat: unset;
|
||||
}
|
||||
}
|
||||
.mat-mdc-floating-label {
|
||||
font: {
|
||||
size: var(--pi-font-size-x-small);
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-subscript-wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// State colors
|
||||
@mixin matFormFieldStateColors {
|
||||
.mdc-text-field {
|
||||
&:not(.mdc-text-field--disabled) {
|
||||
.mdc-text-field__input {
|
||||
color: var(--pi-color-black);
|
||||
}
|
||||
}
|
||||
&:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) {
|
||||
.mdc-floating-label {
|
||||
color: var(--pi-color-grey-300);
|
||||
}
|
||||
}
|
||||
&.mdc-text-field--invalid {
|
||||
&:not(.mdc-text-field--disabled) {
|
||||
.mdc-floating-label {
|
||||
color: var(--pi-color-warn);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Invalid
|
||||
&.mat-form-field-invalid {
|
||||
.mat-mdc-form-field-icon-suffix,
|
||||
.mat-mdc-form-field-icon-prefix,
|
||||
.mat-mdc-form-field-infix {
|
||||
color: var(--pi-color-warn);
|
||||
}
|
||||
// Focused
|
||||
&.mat-focused {
|
||||
.mat-mdc-form-field-icon-suffix,
|
||||
.mat-mdc-form-field-icon-prefix,
|
||||
.mat-mdc-form-field-infix {
|
||||
color: var(--pi-color-warn);
|
||||
}
|
||||
}
|
||||
}
|
||||
// NOT Invalid
|
||||
&:not(.mat-form-field-invalid) {
|
||||
// Focused
|
||||
&.mat-focused {
|
||||
.mat-mdc-form-field-icon-suffix,
|
||||
.mat-mdc-form-field-icon-prefix,
|
||||
.mat-mdc-form-field-infix {
|
||||
color: var(--pi-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-error {
|
||||
color: var(--pi-color-warn);
|
||||
}
|
||||
// NOT Has Error
|
||||
&:not(.has-error) {
|
||||
// Type Fill
|
||||
.mat-form-field-appearance-fill {
|
||||
.mdc-text-field--filled {
|
||||
&:not(.mdc-text-field--disabled) {
|
||||
.mdc-line-ripple {
|
||||
&::before {
|
||||
border-bottom-color: var(--pi-color-grey-100);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.mdc-line-ripple {
|
||||
&::before {
|
||||
border-bottom-color: var(--pi-color-grey-200);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Has Error
|
||||
&.has-error {
|
||||
// Type Fill
|
||||
.mat-form-field-appearance-fill {
|
||||
.mdc-text-field--filled {
|
||||
&:not(.mdc-text-field--disabled) {
|
||||
.mdc-line-ripple {
|
||||
&::before {
|
||||
border-bottom-color: var(--pi-color-warn-200);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.mdc-line-ripple {
|
||||
&::before {
|
||||
border-bottom-color: var(--pi-color-warn);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Placeholder
|
||||
.mat-mdc-form-field-infix {
|
||||
.mat-mdc-input-element {
|
||||
&::placeholder {
|
||||
color: var(--pi-color-grey-300);
|
||||
-webkit-text-fill-color: var(--pi-color-grey-300);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pi-shell,
|
||||
.cdk-overlay-container {
|
||||
.pi-field {
|
||||
// Common
|
||||
.mat-mdc-form-field {
|
||||
width: 100%;
|
||||
line-height: 1.65;
|
||||
font: {
|
||||
family: 'Soehne', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: none;
|
||||
}
|
||||
|
||||
[class*='mdc-notched-outline__'] {
|
||||
background-color: var(--pi-color-white);
|
||||
z-index: -99;
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-focus-overlay {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
// Outlined
|
||||
.mdc-text-field--outlined {
|
||||
.mdc-notched-outline {
|
||||
z-index: -99;
|
||||
}
|
||||
.mdc-notched-outline--upgraded {
|
||||
.mdc-floating-label--float-above {
|
||||
font : {
|
||||
size: var(--pi-font-size-x-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mdc-notched-outline--notched {
|
||||
margin-left: unset;
|
||||
-webkit-clip-path: unset;
|
||||
clip-path: unset;
|
||||
.mdc-notched-outline__notch {
|
||||
border-top: 1px solid;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-form-field-subscript-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mat-mdc-text-field-wrapper {
|
||||
&.mdc-text-field--outlined {
|
||||
.mat-mdc-form-field-infix {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Appearance
|
||||
// Outline
|
||||
@include matFormFieldOutline;
|
||||
|
||||
// Fill
|
||||
@include matFormFieldFill;
|
||||
|
||||
// State colors
|
||||
@include matFormFieldStateColors;
|
||||
|
||||
// Affix
|
||||
.mat-mdc-form-field-prefix,
|
||||
.mat-mdc-form-field-suffix {
|
||||
.mat-icon {
|
||||
line-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Error
|
||||
.mat-mdc-form-field-error {
|
||||
font : {
|
||||
size: var(--pi-font-size-x-small);
|
||||
}
|
||||
}
|
||||
|
||||
// Hint & Error
|
||||
.mat-mdc-form-field-hint-wrapper,
|
||||
.mat-mdc-form-field-error-wrapper {
|
||||
padding: 0 var(--pi-spacing-xx-small);
|
||||
}
|
||||
// Exclude incremental
|
||||
&:not(.pi-form-field__incremental) {
|
||||
// Type Fill
|
||||
.mat-form-field-appearance-fill {
|
||||
input {
|
||||
&.mat-mdc-input-element {
|
||||
all: unset;
|
||||
height: unset;
|
||||
width: -webkit-fill-available;
|
||||
margin-top: 1.875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
52
libs/ui/src/lib/styles/common/vendors/_mat-menu.scss
vendored
Normal file
52
libs/ui/src/lib/styles/common/vendors/_mat-menu.scss
vendored
Normal file
@@ -0,0 +1,52 @@
|
||||
.pi-shell,
|
||||
.cdk-overlay-container {
|
||||
.mat-mdc-menu-panel {
|
||||
border-radius: var(--pi-border-radius-large);
|
||||
background-color: rgba($color: white, $alpha: 0.96);
|
||||
box-shadow: var(--pi-box-shadow-panel);
|
||||
transition: var(--pi-animation);
|
||||
transition-duration: 0.15s;
|
||||
}
|
||||
.mat-mdc-menu-item {
|
||||
line-height: 3.4375rem;
|
||||
height: 3.4375rem;
|
||||
padding: 0 var(--pi-spacing-x-large);
|
||||
color: var(--pi-color-highlighted);
|
||||
transition: var(--pi-animation);
|
||||
font: {
|
||||
family: 'Soehne', Helvetica, Arial, sans-serif;
|
||||
size: var(--pi-font-size-small);
|
||||
}
|
||||
&:hover:not([disabled]),
|
||||
&.cdk-program-focused,
|
||||
&.cdk-keyboard-focused,
|
||||
.mat-mdc-menu-item-highlighted {
|
||||
&:not([disabled]) {
|
||||
color: var(--pi-color-primary);
|
||||
background: var(--pi-color-primary-50);
|
||||
}
|
||||
}
|
||||
}
|
||||
.mat-mdc-menu-panel {
|
||||
min-height: unset;
|
||||
}
|
||||
.mat-mdc-menu-content {
|
||||
&:not(:empty) {
|
||||
padding-top: unset;
|
||||
padding-bottom: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
&.is-mobile {
|
||||
.mat-mdc-menu-item {
|
||||
width: 10rem;
|
||||
}
|
||||
}
|
||||
&:not(.is-mobile) {
|
||||
.mat-mdc-menu-item {
|
||||
width: 12rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
26
libs/ui/src/lib/styles/common/vendors/_mat-progress-bar.scss
vendored
Normal file
26
libs/ui/src/lib/styles/common/vendors/_mat-progress-bar.scss
vendored
Normal file
@@ -0,0 +1,26 @@
|
||||
.pi-shell {
|
||||
// Common
|
||||
.mat-mdc-progress-bar {
|
||||
height: 0.1875rem;
|
||||
border-radius: 0.0938rem;
|
||||
// Type
|
||||
// Fill
|
||||
&.mat-mdc-progress-bar-fill {
|
||||
&::after {
|
||||
background: var(--pi-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Progress bar in dynamic menu
|
||||
.pi-dynamic-menu {
|
||||
.mat-mdc-progress-bar {
|
||||
height: 0.375rem;
|
||||
border-radius: 0.125rem;
|
||||
}
|
||||
.mdc-linear-progress__bar-inner {
|
||||
border-style: solid;
|
||||
border-image: linear-gradient(45deg, var(--pi-color-primary), var(--pi-color-highlighted)) 1;
|
||||
border-top-width: var(--mdc-linear-progress-track-height, .375rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
5
libs/ui/src/lib/styles/common/vendors/_mat-progress-spinner.scss
vendored
Normal file
5
libs/ui/src/lib/styles/common/vendors/_mat-progress-spinner.scss
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
.pi-shell {
|
||||
.mat-mdc-progress-spinner {
|
||||
--mdc-circular-progress-active-indicator-color: #799ef0;
|
||||
}
|
||||
}
|
||||
239
libs/ui/src/lib/styles/common/vendors/_mat-radio-button.scss
vendored
Normal file
239
libs/ui/src/lib/styles/common/vendors/_mat-radio-button.scss
vendored
Normal file
@@ -0,0 +1,239 @@
|
||||
.pi-layout {
|
||||
.mat-mdc-radio-group {
|
||||
display: flex;
|
||||
gap: var(--pi-spacing-x-large);
|
||||
& > * {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: var(--pi-spacing-xxx-small);
|
||||
}
|
||||
.mat-mdc-radio-button {
|
||||
font: {
|
||||
family: 'Soehne', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mdc-radio__outer-circle {
|
||||
border-width: 0.0625rem;
|
||||
}
|
||||
|
||||
.mat-mdc-radio-button {
|
||||
&.mat-mdc-radio-checked {
|
||||
.mat-ripple-element {
|
||||
background-color: var(--pi-color-primary);
|
||||
}
|
||||
}
|
||||
.mdc-radio {
|
||||
// Default
|
||||
.mdc-radio__native-control {
|
||||
&:enabled {
|
||||
&:not(:checked) {
|
||||
& + .mdc-radio__background {
|
||||
.mdc-radio__outer-circle {
|
||||
border-color: var(--pi-color-grey-100);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:checked {
|
||||
& + .mdc-radio__background {
|
||||
.mdc-radio__outer-circle,
|
||||
.mdc-radio__inner-circle {
|
||||
border-color: var(--pi-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Hover
|
||||
&:hover {
|
||||
.mdc-radio__native-control {
|
||||
&:enabled {
|
||||
&:checked {
|
||||
& + .mdc-radio__background {
|
||||
.mdc-radio__outer-circle {
|
||||
border-color: var(--pi-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(:checked) {
|
||||
& + .mdc-radio__background {
|
||||
.mdc-radio__outer-circle {
|
||||
border-color: var(--pi-color-grey-200);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Not disabled
|
||||
&:not(:disabled) {
|
||||
&:active {
|
||||
.mdc-radio__native-control {
|
||||
&:enabled {
|
||||
&:checked {
|
||||
& + .mdc-radio__background {
|
||||
.mdc-radio__outer-circle,
|
||||
.mdc-radio__inner-circle {
|
||||
border-color: var(--pi-color-primary-900);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.mat-accent {
|
||||
--mdc-radio-disabled-selected-icon-color: #3d3d3d;
|
||||
--mdc-radio-disabled-unselected-icon-color: #3d3d3d;
|
||||
--mdc-radio-unselected-focus-icon-color: #799ef0;
|
||||
--mdc-radio-unselected-hover-icon-color: #799ef0;
|
||||
--mdc-radio-unselected-icon-color: rgba(196, 213, 255, 0.15);
|
||||
--mdc-radio-unselected-pressed-icon-color: rgba(196, 213, 255, 0.15);
|
||||
--mdc-radio-selected-focus-icon-color: #799ef0;
|
||||
--mdc-radio-selected-hover-icon-color: #799ef0;
|
||||
--mdc-radio-selected-icon-color: #799ef0;
|
||||
--mdc-radio-selected-pressed-icon-color: #799ef0;
|
||||
--mat-mdc-radio-ripple-color: #3d3d3d;
|
||||
--mat-mdc-radio-checked-ripple-color: #799ef0;
|
||||
}
|
||||
&.mat-mdc-accent {
|
||||
&.mat-mdc-radio-checked {
|
||||
.mdc-radio__outer-circle {
|
||||
border-color: var(--pi-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.mat-mdc-radio-checked {
|
||||
.mdc-form-field {
|
||||
font: {
|
||||
weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pi-wrapper__form {
|
||||
.mat-mdc-radio-group {
|
||||
.pi-list-item {
|
||||
.mat-mdc-radio-button {
|
||||
label {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mat Radio Group in Flex Direction Column Wrapper
|
||||
.pi-wrapper__flex-direction--column {
|
||||
.mat-mdc-radio-group {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pi-wrapper__grid--two {
|
||||
.mat-mdc-radio-label {
|
||||
min-width: 9rem;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-mdc-radio-label-content {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
html {
|
||||
// Mobile
|
||||
&.is-mobile {
|
||||
.pi-layout {
|
||||
.mat-mdc-radio-group {
|
||||
flex-direction: column;
|
||||
gap: var(--pi-spacing-small);
|
||||
& > * {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pi-wrapper__form {
|
||||
.mat-mdc-radio-group {
|
||||
margin: var(--pi-spacing-xx-large) auto;
|
||||
gap: var(--pi-spacing-xx-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mobile & Tablet
|
||||
&:not(.is-desktop) {
|
||||
// Mobile & Tablet S
|
||||
@media screen and (max-width: 62rem) {
|
||||
}
|
||||
}
|
||||
// Tablet
|
||||
&.is-tablet {
|
||||
// Tablet S
|
||||
&.is-tablet__small {
|
||||
.pi-layout {
|
||||
.mat-mdc-radio-group {
|
||||
gap: var(--pi-spacing-medium);
|
||||
[class*='pi-panel__width--'] {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Tablet & Desktop
|
||||
&:not(.is-mobile) {
|
||||
// Large device
|
||||
@media screen and (min-width: 62rem) {
|
||||
.mat-mdc-radio-group {
|
||||
&.pi-wrapper__grid--two {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: var(--pi-spacing-x-large);
|
||||
|
||||
& > *:nth-child(n + 1) {
|
||||
& > *:nth-child(n + 1) {
|
||||
max-width: 70%;
|
||||
&:not(.mat-mdc-radio-label) {
|
||||
display: block;
|
||||
margin-top: var(--pi-spacing-xxx-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Tablet L & Desktop S & M
|
||||
@media screen and (min-width: 62rem) and (max-width: 120rem) {
|
||||
.pi-layout {
|
||||
.mat-mdc-radio-group {
|
||||
gap: var(--pi-spacing-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Desktop
|
||||
&.is-desktop {
|
||||
// Common
|
||||
// Desktop S
|
||||
@media screen and (max-width: 90rem) {
|
||||
}
|
||||
// Desktop M
|
||||
@media screen and (min-width: 90rem) and (max-width: 120rem) {
|
||||
}
|
||||
// Desktop L
|
||||
@media screen and (min-width: 120rem) {
|
||||
.pi-layout {
|
||||
.mat-mdc-radio-group {
|
||||
gap: var(--pi-spacing-x-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
149
libs/ui/src/lib/styles/common/vendors/_mat-slider.scss
vendored
Normal file
149
libs/ui/src/lib/styles/common/vendors/_mat-slider.scss
vendored
Normal file
@@ -0,0 +1,149 @@
|
||||
@mixin sliderChevron($bottom: 1.975rem) {
|
||||
.pi-slider {
|
||||
// Flex direction
|
||||
&.pi-slider__flex-direction--column-reverse {
|
||||
.mdc-slider {
|
||||
.mdc-slider__value-indicator-container {
|
||||
bottom: -1.875rem;
|
||||
.mdc-slider__value-indicator {
|
||||
&::before {
|
||||
bottom: $bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pi-slider {
|
||||
.mat-mdc-slider {
|
||||
display: flex;
|
||||
width: -webkit-fill-availabe;
|
||||
|
||||
.mdc-slider__thumb {
|
||||
.mdc-slider__value-indicator-container {
|
||||
border-radius: 50% 50% 0;
|
||||
.mdc-slider__value-indicator {
|
||||
border-radius: var(--pi-border-radius-small);
|
||||
transform: scale(1);
|
||||
background-color: var(--pi-color-primary);
|
||||
opacity: 1;
|
||||
&::before {
|
||||
border-top-color: var(--pi-color-primary);
|
||||
}
|
||||
.mdc-slider__value-indicator-text {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Type
|
||||
// Default
|
||||
&:not(.pi-slider__range) {
|
||||
.mat-mdc-slider {
|
||||
.mat-mdc-slider {
|
||||
margin-left: var(--pi-spacing-medium);
|
||||
margin-right: var(--pi-spacing-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Range
|
||||
&.pi-slider__range {
|
||||
.mat-mdc-slider {
|
||||
margin-left: var(--pi-spacing-xx-large);
|
||||
margin-right: var(--pi-spacing-xx-large);
|
||||
}
|
||||
}
|
||||
|
||||
// Flex direction
|
||||
&.pi-slider__flex-direction--column-reverse {
|
||||
.mdc-slider {
|
||||
.mdc-slider__value-indicator-container {
|
||||
.mdc-slider__value-indicator {
|
||||
&::before {
|
||||
border-top: unset;
|
||||
border-bottom: 0.375rem solid var(--pi-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Disabled
|
||||
&.is-disabled {
|
||||
.mat-mdc-slider {
|
||||
&.mdc-slider--disabled {
|
||||
.mdc-slider__track--active_fill {
|
||||
border-color: var(--pi-color-primary-200);
|
||||
}
|
||||
.mdc-slider__thumb-knob {
|
||||
background-color: var(--pi-color-primary-200);
|
||||
border-color: var(--pi-color-primary-200);
|
||||
}
|
||||
}
|
||||
.mdc-slider__input {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
.mdc-slider {
|
||||
.mdc-slider__value-indicator-container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pi-card {
|
||||
.pi-slider {
|
||||
// Range
|
||||
&.pi-slider__range {
|
||||
.mat-mdc-slider {
|
||||
margin-bottom: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Slider in dynamic menu
|
||||
.pi-dynamic-menu {
|
||||
.pi-slider {
|
||||
.mat-mdc-slider {
|
||||
margin-top: var(--pi-spacing-xx-large);
|
||||
margin-left: var(--pi-spacing-x-large);
|
||||
margin-right: var(--pi-spacing-xx-large);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
// Mobile
|
||||
&.is-mobile {
|
||||
@include sliderChevron;
|
||||
.pi-slider {
|
||||
// Default
|
||||
&:not(.pi-slider__range) {
|
||||
.mat-mdc-slider {
|
||||
width: calc(
|
||||
100vw - var(--pi-spacing-xxxx-large) - var(--pi-spacing-xx-large) -
|
||||
var(--pi-spacing-xx-large)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
.pi-list-item {
|
||||
&.is-stroked {
|
||||
.pi-slider {
|
||||
.mat-mdc-slider {
|
||||
width: calc(
|
||||
100vw - var(--pi-spacing-xxxx-large) - var(--pi-spacing-xx-large) -
|
||||
var(--pi-spacing-x-large) - var(--pi-spacing-large) - var(--pi-spacing-medium) -
|
||||
var(--pi-spacing-medium)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
101
libs/ui/src/lib/styles/common/vendors/_mat-snackbar.scss
vendored
Normal file
101
libs/ui/src/lib/styles/common/vendors/_mat-snackbar.scss
vendored
Normal file
@@ -0,0 +1,101 @@
|
||||
@mixin snackbarWidth($width: 80vw) {
|
||||
.cdk-overlay-container {
|
||||
.mat-mdc-snack-bar-container {
|
||||
&.pi-snackbar {
|
||||
width: $width;
|
||||
max-width: $width;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pi-layout {
|
||||
.pi-snackbar {
|
||||
width: $width;
|
||||
max-width: $width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cdk-overlay-container {
|
||||
.mat-mdc-snack-bar-container {
|
||||
background: unset;
|
||||
margin: var(--pi-spacing-x-large);
|
||||
&.pi-snackbar {
|
||||
padding: var(--pi-spacing-large) var(--pi-spacing-x-large);
|
||||
border-radius: var(--pi-border-radius-large);
|
||||
box-shadow: var(--pi-box-shadow);
|
||||
border: 1px solid;
|
||||
&.pi-snackbar__info {
|
||||
color: var(--pi-color-primary);
|
||||
background-color: var(--pi-color-primary-25);
|
||||
border-color: var(--pi-color-primary-50);
|
||||
}
|
||||
&.pi-snackbar__error {
|
||||
color: var(--pi-color-warn);
|
||||
background-color: var(--pi-color-warn-25);
|
||||
border-color: var(--pi-color-warn-50);
|
||||
}
|
||||
&.pi-snackbar__success {
|
||||
color: var(--pi-color-success);
|
||||
background-color: var(--pi-color-success-25);
|
||||
border-color: var(--pi-color-success-50);
|
||||
}
|
||||
}
|
||||
.mdc-snackbar__surface {
|
||||
background-color: transparent;
|
||||
box-shadow: unset;
|
||||
}
|
||||
.mdc-snackbar__label {
|
||||
padding-left: unset;
|
||||
padding-right: unset;
|
||||
padding-top: unset;
|
||||
padding-bottom: unset;
|
||||
span {
|
||||
text-align: left;
|
||||
line-height: 130%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pi-layout {
|
||||
.pi-snackbar {
|
||||
padding: var(--pi-spacing-medium) var(--pi-spacing-x-large);
|
||||
border-radius: var(--pi-border-radius-large);
|
||||
border: 1px solid;
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile
|
||||
@media screen and (max-width: 40rem) {
|
||||
@include snackbarWidth;
|
||||
.cdk-overlay-container {
|
||||
.mat-mdc-snack-bar-handset {
|
||||
.mat-mdc-snack-bar-container {
|
||||
&.pi-snackbar {
|
||||
margin: var(--pi-spacing-x-small) auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tablet
|
||||
@media screen and (min-width: 40rem) and (max-width: 77.5rem) {
|
||||
@include snackbarWidth(66.66vw);
|
||||
}
|
||||
|
||||
// Desktop
|
||||
// Desktop S
|
||||
@media screen and (min-width: 77.5rem) and (max-width: 90rem) {
|
||||
@include snackbarWidth(33.33vw);
|
||||
}
|
||||
|
||||
// Desktop M
|
||||
@media screen and (min-width: 90rem) and (max-width: 120rem) {
|
||||
@include snackbarWidth(33.33vw);
|
||||
}
|
||||
|
||||
// Desktop L
|
||||
@media screen and (min-width: 120rem) {
|
||||
@include snackbarWidth(25vw);
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user