mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-10-29 12:26:09 +01: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

1
styles/index.scss
View File

@@ -32,6 +32,7 @@
@import './patterns/fading-long-section';
@import './patterns/feature-comparison';
@import './patterns/feature-list';
@import './patterns/fixed-at-corner';
// Placeholders
@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 {
background: rgba(0, 0, 0, .3);
border-radius: 9999px;
height: var(--var-circle-size);
width: var(--var-circle-size);
height: var(--circle-size);
width: var(--circle-size);
}
.circle--sm {
--var-circle-size: 0.5rem;
--circle-size: 0.5rem;
}
.circle--md {
--var-circle-size: 2rem;
--circle-size: 2rem;
}
.circle--lg {
--var-circle-size: 4rem;
--circle-size: 4rem;
}

25
styles/placeholders/_triangle.scss
View File

@@ -5,33 +5,42 @@
}
.triangle--t {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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;
}