arifal/sibedas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update 2025-06-02

Browse Source
This commit is contained in:
arifal
2025-02-06 04:55:30 +07:00
parent 4eac6ab83d
commit d54edb7783
23 changed files with 1354 additions and 684 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
resources/scss/components/_circle.scss
View File

@@ -1,110 +1,97 @@
:root {
--circle-color: #c97a04; /* Default warna lingkaran */
--circle-color: #c97a04; /* Default warna lingkaran */
}
.circle-container {
width: 200px; /* Ukuran lingkaran */
height: 200px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--circle-color);; /* Warna lingkaran utama */
border-radius: 50%; /* Membuat lingkaran */
border: 6px solid white; /* Border putih */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Efek bayangan */
position: absolute;
.circle-content {
width: 180px; /* Ukuran lingkaran dalam */
height: 180px;
background-color: var(--circle-color); /* Warna lingkaran dalam */
border-radius: 50%;
width: 200px; /* Ukuran lingkaran */
height: 200px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: white; /* Warna teks */
border: 4px solid white; /* Border lingkaran dalam */
padding: 10px;
box-sizing: border-box;
}
.circle-content .document-title {
font-size: 14px;
font-weight: bold;
margin: 0 5px;
line-height: 1.5;
}
.circle-content .document-total {
font-size: 14px;
font-weight: bold;
color: #000000; /* Warna biru gelap untuk total */
background-color: white; /* Background putih untuk total */
padding: 0 7px;
border-radius: 10px;
margin: 0;
}
.circle-content .document-count {
font-size: 24px;
font-weight: bold;
margin: 0;
}
.circle-content .document-type {
font-size: 14px;
margin: 0;
}
.small-circle-container {
position: absolute;
bottom: 0;
right: 0;
width: 50px; /* Ukuran lingkaran kecil */
height: 50px;
background-color: #2d4f90; /* Warna lingkaran kecil */
background-color: var(--circle-color); /* Warna lingkaran utama */
border-radius: 50%; /* Membuat lingkaran */
// border: 4px solid white; /* Border putih */
display: flex;
align-items: center;
justify-content: center;
border: 6px solid white; /* Border putih */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Efek bayangan */
position: absolute;
.small-circle-content{
width: 45px;
height: 45px;
background-color: #2d4f90; /* Warna lingkaran kecil */
border-radius: 50%; /* Membuat lingkaran */
border: 2px solid white; /* Border putih */
display: flex;
align-items: center;
justify-content: center;
.small-percentage {
font-size: 10px;
font-weight: bold;
.circle-content {
width: 180px; /* Ukuran lingkaran dalam */
height: 180px;
background-color: var(--circle-color); /* Warna lingkaran dalam */
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: white; /* Warna teks */
margin: 0;
}
border: 4px solid white; /* Border lingkaran dalam */
padding: 10px;
box-sizing: border-box;
}
}
.circle-content .document-title {
font-size: 14px;
font-weight: bold;
margin: 0 5px;
line-height: 1.5;
}
.circle-content .document-total {
font-size: 14px;
font-weight: bold;
color: #000000; /* Warna biru gelap untuk total */
background-color: white; /* Background putih untuk total */
padding: 0 7px;
border-radius: 10px;
margin: 0;
}
.circle-content .document-count {
font-size: 24px;
font-weight: bold;
margin: 0;
}
.circle-content .document-type {
font-size: 14px;
margin: 0;
}
.small-circle-container {
position: absolute;
bottom: 0;
right: 0;
width: 50px; /* Ukuran lingkaran kecil */
height: 50px;
background-color: #2d4f90; /* Warna lingkaran kecil */
border-radius: 50%; /* Membuat lingkaran */
// border: 4px solid white; /* Border putih */
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Efek bayangan */
.small-circle-content {
width: 45px;
height: 45px;
background-color: #2d4f90; /* Warna lingkaran kecil */
border-radius: 50%; /* Membuat lingkaran */
border: 2px solid white; /* Border putih */
display: flex;
align-items: center;
justify-content: center;
.small-percentage {
font-size: 10px;
font-weight: bold;
color: white; /* Warna teks */
margin: 0;
}
}
}
}
.arrow-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; /* Agar SVG tidak menghalangi interaksi */
}
// .circle-container {
// width: 20vw; /* Responsif menggunakan unit viewport */
// height: 20vw; /* Pastikan tinggi sama dengan lebar */