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

feat: Fixed at corner

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-19 19:07:44 +07:00
parent cd700fb737
commit 6ff4995fef
10 changed files with 146 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.eleventy.js
View File

@@ -54,8 +54,9 @@ module.exports = function(eleventyConfig) {
return `<div class="square"></div>`; return `<div class="square"></div>`;
}); });
// `corner` can be one of `t`, `r`, `b`, `l`, `tr`, `br`, `tl`, `bl` // `corner` can be one of `t`, `r`, `b`, `l`, `tr`, `br`, `tl`, `bl`
eleventyConfig.addShortcode('triangle', function(corner) { eleventyConfig.addShortcode('triangle', function(corner, size) {
return `<div class="triangle triangle--${corner}"></div>`; const s = size || 'sm';
return `<div class="triangle triangle--${corner} triangle--${s}"></div>`;
}); });
// Get the first `n` elements of a collection. // Get the first `n` elements of a collection.

14
contents/_includes/patterns/fixed-at-corner.njk Normal file
View File

@@ -0,0 +1,14 @@
<div class="fixed-at-corner">
<div class="fixed-at-corner__corner fixed-at-corner__corner--tl">
{% triangle "tl", "md" %}
</div>
<div class="fixed-at-corner__corner fixed-at-corner__corner--tr">
{% triangle "tr", "md" %}
</div>
<div class="fixed-at-corner__corner fixed-at-corner__corner--br">
{% triangle "br", "md" %}
</div>
<div class="fixed-at-corner__corner fixed-at-corner__corner--bl">
{% triangle "bl", "md" %}
</div>
</div>

68
contents/fixed-at-corner.md Normal file
View File

@@ -0,0 +1,68 @@
---
layout: layouts/post.njk
title: Fixed at corner
description: Fix an element at corner with CSS
keywords: css fixed
---
## HTML
```html
<div class="fixed-at-corner">
<!-- Top-left corner -->
<div class="fixed-at-corner__corner fixed-at-corner__corner--tl">
...
</div>
<!-- Top-right corner -->
<div class="fixed-at-corner__corner fixed-at-corner__corner--tr">
...
</div>
<!-- Bottom-right corner -->
<div class="fixed-at-corner__corner fixed-at-corner__corner--br">
...
</div>
<!-- Bottom-left corner -->
<div class="fixed-at-corner__corner fixed-at-corner__corner--bl">
...
</div>
</div>
```
## CSS
```css
.fixed-at-corner {
position: relative;
}
.fixed-at-corner__corner {
position: absolute;
}
.fixed-at-corner__corner--tl {
left: 0;
top: 0;
}
.fixed-at-corner__corner--tr {
top: 0;
right: 0;
}
.fixed-at-corner__corner--br {
bottom: 0;
right: 0;
}
.fixed-at-corner__corner--bl {
bottom: 0;
left: 0;
}
```
{% demo %}
{% include "patterns/fixed-at-corner.njk" %}
{% enddemo %}

6
contents/index.njk
View File

@@ -139,6 +139,12 @@ eleventyExcludeFromCollections: true
<div class="pattern__title">Feature list</div> <div class="pattern__title">Feature list</div>
</a> </a>
</div> </div>
<div class="pattern__item">
<a class="pattern__link" href="/fixed-at-corner/">
<div class="pattern__cover">{% include "patterns/fixed-at-corner.njk" %}</div>
<div class="pattern__title">Fixed at corner</div>
</a>
</div>
</div> </div>
</div> </div>

95
pages/fixed-at-corner/index.tsx
View File

@@ -1,95 +0,0 @@
import * as React from 'react';
import Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Triangle from '../../placeholders/Triangle';
const Details: React.FC<{}> = () => {
return (
<PatternLayout pattern={Pattern.FixedAtCorner}>
<Head>
<meta name="description" content="Fix an element at corner with CSS" />
<meta name="og:description" content="Fix an element at corner with CSS" />
<meta name="twitter:description" content="Fix an element at corner with CSS" />
<meta name="keywords" content="css fixed" />
</Head>
<BrowserFrame
html={`
<div class="container">
<!-- Top-left corner -->
<div class="container__corner container__corner--tl">
...
</div>
<!-- Top-right corner -->
<div class="container__corner container__corner--tr">
...
</div>
<!-- Bottom-right corner -->
<div class="container__corner container__corner--br">
...
</div>
<!-- Bottom-left corner -->
<div class="container__corner container__corner--bl">
...
</div>
</div>
`}
css={`
.container {
position: relative;
}
.container__corner {
position: absolute;
}
.container__corner--tl {
left: 0;
top: 0;
}
.container__corner--tr {
top: 0;
right: 0;
}
.container__corner--br {
bottom: 0;
right: 0;
}
.container__corner--bl {
bottom: 0;
left: 0;
}
`}
>
<div style={{ height: '100%', position: 'relative' }}>
<div style={{ left: 0, position: 'absolute', top: 0 }}>
<Triangle size={64} corner="tl" />
</div>
<div style={{ position: 'absolute', right: 0, top: 0 }}>
<Triangle size={64} corner="tr" />
</div>
<div style={{ bottom: 0, position: 'absolute', right: 0 }}>
<Triangle size={64} corner="br" />
</div>
<div style={{ bottom: 0, left: 0, position: 'absolute' }}>
<Triangle size={64} corner="bl" />
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.CookieBanner, Pattern.CornerRibbon, Pattern.FixedAtSide]} />
</PatternLayout>
);
};
export default Details;

18
patterns/fixed-at-corner/Cover.tsx
View File

@@ -1,18 +0,0 @@
import * as React from 'react';
import Frame from '../../placeholders/Frame';
import Triangle from '../../placeholders/Triangle';
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div style={{ position: 'relative' }}>
<div style={{ left: 0, position: 'absolute', top: 0 }}>
<Triangle size={32} />
</div>
</div>
</Frame>
);
};
export default Cover;

1
styles/index.scss
View File

@@ -32,6 +32,7 @@
@import './patterns/fading-long-section'; @import './patterns/fading-long-section';
@import './patterns/feature-comparison'; @import './patterns/feature-comparison';
@import './patterns/feature-list'; @import './patterns/feature-list';
@import './patterns/fixed-at-corner';
// Placeholders // Placeholders
@import './placeholders/circle'; @import './placeholders/circle';

32
styles/patterns/_fixed-at-corner.scss Normal file
View File

@@ -0,0 +1,32 @@
.fixed-at-corner {
width: 100%;
height: 100%;
border: 1px solid rgba(0, 0, 0, .3);
border-radius: 0.25rem;
position: relative;
}
.fixed-at-corner__corner {
position: absolute;
}
.fixed-at-corner__corner--tl {
left: 0;
top: 0;
}
.fixed-at-corner__corner--tr {
top: 0;
right: 0;
}
.fixed-at-corner__corner--br {
bottom: 0;
right: 0;
}
.fixed-at-corner__corner--bl {
bottom: 0;
left: 0;
}

10
styles/placeholders/_circle.scss
View File

@@ -1,15 +1,15 @@
.circle { .circle {
background: rgba(0, 0, 0, .3); background: rgba(0, 0, 0, .3);
border-radius: 9999px; border-radius: 9999px;
height: var(--var-circle-size); height: var(--circle-size);
width: var(--var-circle-size); width: var(--circle-size);
} }
.circle--sm { .circle--sm {
--var-circle-size: 0.5rem; --circle-size: 0.5rem;
} }
.circle--md { .circle--md {
--var-circle-size: 2rem; --circle-size: 2rem;
} }
.circle--lg { .circle--lg {
--var-circle-size: 4rem; --circle-size: 4rem;
} }

25
styles/placeholders/_triangle.scss
View File

@@ -5,33 +5,42 @@
} }
.triangle--t { .triangle--t {
border-color: transparent transparent rgba(0, 0, 0, .3) transparent; border-color: transparent transparent rgba(0, 0, 0, .3) transparent;
border-width: 0 0.5rem 0.5rem 0.5rem; border-width: 0 var(--triangle-size) var(--triangle-size) var(--triangle-size);
} }
.triangle--r { .triangle--r {
border-color: transparent transparent transparent rgba(0, 0, 0, .3); border-color: transparent transparent transparent rgba(0, 0, 0, .3);
border-width: 0.5rem 0 0.5rem 1rem; border-width: var(--triangle-size) 0 var(--triangle-size) 1rem;
} }
.triangle--b { .triangle--b {
border-color: rgba(0, 0, 0, .3) transparent transparent transparent; border-color: rgba(0, 0, 0, .3) transparent transparent transparent;
border-width: 0.5rem 0.5rem 0 0.5rem; border-width: var(--triangle-size) var(--triangle-size) 0 var(--triangle-size);
} }
.triangle--l { .triangle--l {
border-color: transparent rgba(0, 0, 0, .3) transparent transparent; border-color: transparent rgba(0, 0, 0, .3) transparent transparent;
border-width: 0.5rem 1rem 0.5rem 0; border-width: var(--triangle-size) 1rem var(--triangle-size) 0;
} }
.triangle--tr { .triangle--tr {
border-color: transparent rgba(0, 0, 0, .3) transparent transparent; border-color: transparent rgba(0, 0, 0, .3) transparent transparent;
border-width: 0 0.5rem 0.5rem 0; border-width: 0 var(--triangle-size) var(--triangle-size) 0;
} }
.triangle--br { .triangle--br {
border-color: transparent transparent rgba(0, 0, 0, .3) transparent; border-color: transparent transparent rgba(0, 0, 0, .3) transparent;
border-width: 0 0 0.5rem 0.5rem; border-width: 0 0 var(--triangle-size) var(--triangle-size);
} }
.triangle--bl { .triangle--bl {
border-color: transparent transparent transparent rgba(0, 0, 0, .3); border-color: transparent transparent transparent rgba(0, 0, 0, .3);
border-width: 0.5rem 0 0 0.5rem; border-width: var(--triangle-size) 0 0 var(--triangle-size);
} }
.triangle--tl { .triangle--tl {
border-color: rgba(0, 0, 0, .3) transparent transparent transparent; border-color: rgba(0, 0, 0, .3) transparent transparent transparent;
border-width: 0.5rem 0.5rem 0 0; border-width: var(--triangle-size) var(--triangle-size) 0 0;
}
.triangle--sm {
--triangle-size: 0.5rem;
}
.triangle--md {
--triangle-size: 2rem;
}
.triangle--lg {
--triangle-size: 4rem;
} }