mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-27 07:44:28 +02:00
Code Issues Releases Wiki Activity

Add overlay play button

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-11-30 16:46:30 +07:00
parent e98a843262
commit 7dc6186777
6 changed files with 181 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
client/placeholders/Triangle.tsx
View File

@@ -1,43 +1,58 @@
import React from 'react';
interface TriangleProps {
backgroundColor?: string;
corner?: string;
size?: number;
}
const Triangle: React.FC<TriangleProps> = ({ size = 16, corner = 'tl' }) => {
const Triangle: React.FC<TriangleProps> = ({
backgroundColor = 'rgba(0, 0, 0, .3)',
size = 16,
corner = 'tl',
}) => {
let bw = '';
let bc = '';
switch (corner) {
case 't':
bw = `0 ${size}px ${size}px ${size}px`;
bc = 'transparent transparent rgba(0, 0, 0, .3) transparent';
bc = `transparent transparent ${backgroundColor} transparent`;
break;
case 'r':
bw = `${size}px 0 ${size}px ${2 * size}px`;
bc = `transparent transparent transparent ${backgroundColor}`;
break;
case 'b':
bw = `${size}px ${size}px 0 ${size}px`;
bc = 'rgba(0, 0, 0, .3) transparent transparent transparent';
bc = `${backgroundColor} transparent transparent transparent`;
break;
case 'l':
bw = `${size}px ${2 * size}px ${size}px 0`;
bc = `transparent ${backgroundColor} transparent transparent`;
break;
case 'tr':
bw = `0 ${size}px ${size}px 0`;
bc = 'transparent rgba(0, 0, 0, .3) transparent transparent';
bc = `transparent ${backgroundColor} transparent transparent`;
break;
case 'br':
bw = `0 0 ${size}px ${size}px`;
bc = 'transparent transparent rgba(0, 0, 0, .3) transparent';
bc = `transparent transparent ${backgroundColor} transparent`;
break;
case 'bl':
bw = `${size}px 0 0 ${size}px`;
bc = 'transparent transparent transparent rgba(0, 0, 0, .3)';
bc = `transparent transparent transparent ${backgroundColor}`;
break;
case 'tl':
default:
bw = `${size}px ${size}px 0 0`;
bc = 'rgba(0, 0, 0, .3) transparent transparent transparent';
bc = `${backgroundColor} transparent transparent transparent`;
break;
}