mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-10-25 11:46:56 +02:00
Code Issues Releases Wiki Activity

feat: Move to static site

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-12 08:41:38 +07:00
parent dbfaaf359c
commit e2ec4d94fc
69 changed files with 776 additions and 1090 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
styles/patterns/_concave-corners.scss
View File

@@ -1,61 +0,0 @@
:root {
--concave-corners-background: rgba(0, 0, 0, 0.3);
--concave-corners-size: 1rem;
}
.concave-corners {
background-color: var(--concave-corners-background);
/* Used to position the corners */
position: relative;
/* Misc */
height: 100%;
}
.concave-corners__corner {
/* Absolute position */
position: absolute;
/* Size */
height: var(--concave-corners-size);
width: var(--concave-corners-size);
background: #fff;
}
.concave-corners__corner--tl {
/* Position */
left: 0;
top: 0;
/* Border radius */
border-radius: 0 0 var(--concave-corners-size) 0;
}
.concave-corners__corner--tr {
/* Position */
right: 0;
top: 0;
/* Border radius */
border-radius: 0 0 0 var(--concave-corners-size);
}
.concave-corners__corner--bl {
/* Position */
bottom: 0;
left: 0;
/* Border radius */
border-radius: 0 var(--concave-corners-size) 0 0;
}
.concave-corners__corner--br {
/* Position */
bottom: 0;
right: 0;
/* Border radius */
border-radius: var(--concave-corners-size) 0 0 0;
}

9
styles/patterns/_dropcap.scss
View File

@@ -1,9 +0,0 @@
.p-drop-cap:first-letter {
border: 2px solid rgba(0, 0, 0, 0.3);
float: left;
font-size: 64px;
font-weight: 700;
line-height: 1;
margin: 0 8px 0 0;
padding: 0 8px;
}

7
styles/patterns/_dropdown.scss
View File

@@ -1,7 +0,0 @@
.p-dropdown-content {
display: none;
}
.p-dropdown:hover .p-dropdown-content {
display: block;
}

9
styles/patterns/_floating-label.scss
View File

@@ -1,9 +0,0 @@
.p-floating-container label {
opacity: 0;
}
.p-floating-container input:not(:placeholder-shown) + label {
background: #fff;
transform: translate(0, -50%);
opacity: 1;
}

49
styles/patterns/_folder-structure.scss
View File

@@ -1,49 +0,0 @@
:root {
--folder-structure-item-height: 1rem;
--folder-structure-item-margin-left: 2rem;
--folder-structure-item-padding-top: 1rem;
}
.folder-structure ul {
/* Reset */
list-style-type: none;
margin: 0;
}
.folder-structure li {
padding: var(--folder-structure-item-padding-top) 0rem 0rem 0rem;
position: relative;
}
.folder-structure li::before {
border-left: 1px solid rgba(0, 0, 0, 0.3);
content: '';
/* Position */
left: 0;
position: absolute;
top: 0;
transform: translate(calc(-1 * var(--folder-structure-item-margin-left)), 0);
/* Size */
height: 100%;
}
.folder-structure li::after {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
content: '';
/* Position */
left: 0;
position: absolute;
top: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
transform: translate(-100%, 0);
/* Size */
width: var(--folder-structure-item-margin-left);
}
/* Remove the border from the last item */
.folder-structure li:last-child::before {
height: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
}

48
styles/patterns/_inverted-corners.scss
View File

@@ -1,48 +0,0 @@
:root {
--inverted-corners-background: #52525b;
--inverted-corners-size: 2rem;
}
.inverted-corners {
background-color: var(--inverted-corners-background);
/* Used to position the corner */
position: relative;
/* Misc */
height: 100%;
}
.inverted-corners::before {
content: '';
/* Absolute position */
bottom: calc(-2 * var(--inverted-corners-size));
left: 0;
position: absolute;
/* Size */
height: calc(2 * var(--inverted-corners-size));
width: var(--inverted-corners-size);
/* Border */
background-color: transparent;
border-top-left-radius: var(--inverted-corners-size);
box-shadow: var(--inverted-corners-background) 0px calc(-1 * var(--inverted-corners-size)) 0px 0px;
}
/* Use case */
.inverted-corners--speech {
/* Border radius */
border-bottom-right-radius: var(--inverted-corners-size);
border-top-left-radius: var(--inverted-corners-size);
border-top-right-radius: var(--inverted-corners-size);
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Misc */
color: #fff;
}

21
styles/patterns/_layered-card.scss
View File

@@ -1,21 +0,0 @@
.layered-card {
position: relative;
}
.layered-card::before {
background: rgba(0, 0, 0, 0.3);
content: '';
/* Position */
top: 0;
left: 0;
position: absolute;
transform: translate(1rem, 1rem);
/* Size */
height: 100%;
width: 100%;
/* Display under the main content */
z-index: -1;
}

15
styles/patterns/_masonry-grid.scss
View File

@@ -1,15 +0,0 @@
.masonry-grid {
column-count: 3;
column-gap: 1rem;
/* Misc */
width: 100%;
}
.masonry-grid__item {
/* Prevent a column from breaking into multiple columns */
break-inside: avoid;
/* Misc */
margin-bottom: 1rem;
}

17
styles/patterns/_mega-menu.scss
View File

@@ -1,17 +0,0 @@
.p-mega-menu-container {
position: relative;
}
.p-mega-menu-content {
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.3);
display: none;
left: 0px;
margin-top: -1px;
position: absolute;
top: 100%;
width: 100%;
z-index: 9999;
}
.p-mega-menu-trigger:hover .p-mega-menu-content {
display: block;
}

3
styles/patterns/_menu.scss
View File

@@ -1,3 +0,0 @@
.p-menu-item:hover {
background-color: rgba(0, 0, 0, 0.1);
}

38
styles/patterns/_nested-dropdowns.scss
View File

@@ -1,38 +0,0 @@
.p-nested-dropdowns {
border: 1px solid rgba(0, 0, 0, 0.3);
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
}
.p-nested-dropdowns li {
padding: 8px;
position: relative;
}
.p-nested-dropdowns ul {
border: 1px solid rgba(0, 0, 0, 0.3);
display: none;
left: 0;
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
width: 200px;
}
.p-nested-dropdowns ul ul {
left: 100%;
position: absolute;
top: 0;
}
.p-nested-dropdowns li:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.p-nested-dropdowns li:hover > ul {
display: block;
}

58
styles/patterns/_price-tag.scss
View File

@@ -1,58 +0,0 @@
:root {
--price-tag-background: rgba(0, 0, 0, 0.3);
--price-tag-height: 2rem;
}
.price-tag {
background: var(--price-tag-background);
color: #fff;
/* Center the price */
align-items: center;
display: flex;
justify-content: center;
/* Used to position the triangle */
position: relative;
/* Size */
height: var(--price-tag-height);
/* Spacing */
padding: 0.25rem 0.5rem;
}
/* The triangle */
.price-tag::before {
content: '';
border-color: transparent var(--price-tag-background) transparent transparent;
border-style: solid;
border-width: calc(var(--price-tag-height) / 2) calc(var(--price-tag-height) / 2) calc(var(--price-tag-height) / 2)
0rem;
/* Position */
left: 0px;
position: absolute;
top: 0px;
transform: translate(-100%, 0px);
}
/* The dot */
.price-tag::after {
content: '';
/* Make it like a cirle */
background: #fff;
border-radius: 9999rem;
/* Position */
left: 0;
position: absolute;
top: 50%;
transform: translate(-0.5rem, -50%);
/* Size */
height: 0.5rem;
width: 0.5rem;
}

6
styles/patterns/_radio-button-group.scss
View File

@@ -1,6 +0,0 @@
.p-radio-button-group label {
border-right: 1px solid rgba(0, 0, 0, 0.3);
}
.p-radio-button-group label:last-child {
border-right-color: transparent;
}

28
styles/patterns/_star.scss
View File

@@ -1,28 +0,0 @@
.p-rating {
align-items: center;
display: flex;
font-size: 32px;
justify-content: center;
flex-direction: row-reverse;
}
.p-rating .p-rating-star:hover,
.p-rating .p-rating-star:hover ~ .p-rating-star {
color: transparent;
}
.p-rating .p-rating-star:hover:before,
.p-rating .p-rating-star:hover ~ .p-rating-star:before {
color: #00449e;
content: '\2605';
left: 0;
position: absolute;
}
.p-rating-star {
background-color: transparent;
border: transparent;
margin: 0 2px;
padding: 0;
position: relative;
}

41
styles/patterns/_three-dimensions-card.scss
View File

@@ -1,41 +0,0 @@
:root {
--three-dimensions-card-left-side-width: 1rem;
}
.three-dimensions-card {
position: relative;
}
/* The left side */
.three-dimensions-card::before {
background: rgba(0, 0, 0, 0.3);
content: '';
/* Position */
top: var(--three-dimensions-card-left-side-width);
left: 0px;
position: absolute;
transform: translate(-100%, 0) skewY(-45deg);
transform-origin: left top;
/* Size */
height: 100%;
width: var(--three-dimensions-card-left-side-width);
}
/* The bottom side */
.three-dimensions-card::after {
background: rgba(0, 0, 0, 0.3);
content: '';
/* Position */
bottom: 0px;
left: 0px;
position: absolute;
transform: translate(0, 100%) skewX(-45deg);
transform-origin: left top;
/* Size */
height: var(--three-dimensions-card-left-side-width);
width: 100%;
}

32
styles/patterns/_tooltip.scss
View File

@@ -1,32 +0,0 @@
.p-tooltip {
position: relative;
}
.p-tooltip:hover .p-tooltip-arrow,
.p-tooltip:hover .p-tooltip-content {
opacity: 1;
pointer-events: initial;
}
.p-tooltip-arrow {
border: 8px solid transparent;
border-top-color: #00439e;
bottom: 100%;
height: 0;
left: 50%;
opacity: 0;
pointer-events: none;
position: absolute;
transform: translate(-50%, 8px);
width: 0;
z-index: 10;
}
.p-tooltip-content {
background-color: #00439e;
border-radius: 2px;
bottom: 100%;
left: 50%;
opacity: 0;
pointer-events: none;
position: absolute;
transform: translate(-50%, -8px);
z-index: 10;
}

62
styles/patterns/_tree-diagram.scss
View File

@@ -1,62 +0,0 @@
.tree-diagram ul {
display: flex;
position: relative;
/* Reset */
list-style-type: none;
margin: 0;
padding: 1rem 0.5rem 0rem 0.5rem;
}
.tree-diagram ul ul::before {
border-right: 1px solid rgba(0, 0, 0, 0.3);
content: '';
height: 1rem;
position: absolute;
top: 0;
right: 50%;
width: 50%;
}
.tree-diagram li {
padding: 1rem 0.5rem 0rem 0.5rem;
position: relative;
/* Center the content */
align-items: center;
display: flex;
flex-direction: column;
}
.tree-diagram li::before {
border-right: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(0, 0, 0, 0.3);
content: '';
height: 1rem;
/* Position */
position: absolute;
top: 0;
right: 50%;
width: 50%;
}
.tree-diagram li::after {
border-top: 1px solid rgba(0, 0, 0, 0.3);
content: '';
/* Position */
position: absolute;
top: 0;
right: 0;
width: 50%;
}
.tree-diagram li:first-child::before,
.tree-diagram li:last-child::after {
border-top: none;
}
li.tree-diagram__root::before {
border-right: none;
}

42
styles/patterns/_zigzag-timeline.scss
View File

@@ -1,42 +0,0 @@
.zigzag-timeline__item {
/* Used to position the milestone */
position: relative;
/* Border */
border-bottom: 1px solid #71717a;
/* Take full width */
width: 100%;
}
.zigzag-timeline__milestone {
/* Absolute position */
position: absolute;
top: 50%;
/* Circle it */
border-radius: 50%;
height: 2rem;
width: 2rem;
/* Misc */
background: #71717a;
}
/* Styles for even items */
.zigzag-timeline__item:nth-child(2n) {
border-left: 1px solid #71717a;
}
.zigzag-timeline__item:nth-child(2n) .zigzag-timeline__milestone {
left: 0;
transform: translate(-50%, -50%);
}
/* Styles for odd items */
.zigzag-timeline__item:nth-child(2n + 1) {
border-right: 1px solid #71717a;
}
.zigzag-timeline__item:nth-child(2n + 1) .zigzag-timeline__milestone {
right: 0;
transform: translate(50%, -50%);
}