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: Add avatar list

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-19 11:30:21 +07:00
parent 0fca0b705a
commit 4401de7f7b
17 changed files with 114 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
styles/patterns/_accordion.scss Normal file
View File

@@ -0,0 +1,32 @@
.accordion {
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
height: 100%;
width: 100%;
}
.accordion__item:not(:last-child) {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.accordion__header {
align-items: center;
display: flex;
justify-content: center;
cursor: pointer;
padding: 0.5rem;
}
.accordion__toggle {
margin-right: 0.25rem;
}
.accordion__title {
flex: 1;
}
.accordion__content {
padding: 0.5rem;
}
.accordion__item--collapsed .accordion__content {
display: none;
}
.accordion__item--expanded .accordion__content {
display: block;
}

66
styles/patterns/_arrow-buttons.scss Normal file
View File

@@ -0,0 +1,66 @@
.arrow-buttons {
position: relative;
height: 100%;
width: 100%;
}
.arrow-button {
/* Transparent background */
background-color: transparent;
/* Size */
height: 12px;
width: 12px;
}
.arrow-button--t {
/* Edges */
border-left: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(0, 0, 0, 0.3);
transform: translateY(25%) rotate(45deg);
}
.arrow-button--r {
/* Edges */
border-right: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(0, 0, 0, 0.3);
transform: translateX(-25%) rotate(45deg);
}
.arrow-button--b {
/* Edges */
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-right: 1px solid rgba(0, 0, 0, 0.3);
transform: translateY(-25%) rotate(45deg);
}
.arrow-button--l {
/* Edges */
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-left: 1px solid rgba(0, 0, 0, 0.3);
transform: translateX(25%) rotate(45deg);
}
/* Demo */
.arrow-buttons__corner {
position: absolute;
}
.arrow-buttons__corner--t {
left: 50%;
top: 0;
transform: translate(-50%, 0%);
}
.arrow-buttons__corner--r {
right: 0;
top: 50%;
transform: translate(0%, -50%);
}
.arrow-buttons__corner--b {
bottom: 0;
left: 50%;
transform: translate(-50%, 0%);
}
.arrow-buttons__corner--l {
left: 0;
top: 50%;
transform: translate(0%, -50%);
}

28
styles/patterns/_avatar-list.scss Normal file
View File

@@ -0,0 +1,28 @@
.avatars {
display: flex;
justify-content: center;
height: 2rem;
width: 100%;
}
.avatars__item {
margin-left: -0.25rem;
}
.avatars__image {
background-color: #BBB;
box-shadow: 0 0 0 0.25rem #FFF;
color: #FFF;
font-size: 0.75rem;
/* Rounded border */
border-radius: 50%;
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Size */
height: 2rem;
width: 2rem;
}

17
styles/patterns/_avatar.scss Normal file
View File

@@ -0,0 +1,17 @@
.avatar {
height: 8rem;
width: 8rem;
background-color: rgba(0, 0, 0, 0.3);
/* Rounded border */
border-radius: 50%;
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
}
.avatar__image {
height: 50%;
width: 50%;
}