Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Review Changes #14

Open
wants to merge 3 commits into
base: temp-dev
Choose a base branch
from
Open

feat: Review Changes #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b60481e
feat: Review Changes
jalajcodes Apr 1, 2022
bcdf27b
update index.html
jalajcodes Apr 1, 2022
173c6b5
fix
jalajcodes Apr 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 46 additions & 2 deletions components/badge/badge.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,52 @@
width: fit-content;
box-sizing: border-box;
margin: 0;
color: var(--black);
}

.avatar-badge {
display: flex;
position: relative;
align-items: center;
gap: 10px;
width: fit-content;
box-sizing: border-box;
margin: 0;
color: var(--black);
}
.avatar-badge .badge {
position: absolute;
right: -0.2rem;
bottom: 0.2rem;
z-index: 1;
width: 0.8rem;
height: 1.5rem;
border: 2px solid var(--white);
border-radius: 50%;
}

.icon-badge {
display: flex;
position: relative;
align-items: center;
gap: 10px;
width: fit-content;
box-sizing: border-box;
margin: 0;
color: var(--black);
}
.icon-badge i {
font-size: 2.5rem;
}
.icon-badge .badge {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Most of the properties for .avatar-badge .badge and .icon-badge .badge are same. You can merge the common properties and only separate the ones that are different

position: absolute;
right: -0.5rem;
top: 0rem;
z-index: 1;
width: 0.8rem;
height: 1.5rem;
border: 2px solid var(--white);
border-radius: 50%;
}

.badge {
Expand All @@ -30,5 +76,3 @@
.badge-round {
border-radius: 50rem;
}

/*# sourceMappingURL=badge.css.map */
12 changes: 6 additions & 6 deletions components/card/card.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
position: relative;
overflow: hidden;
transition: all 0.3s;
background: #ffffff;
background: var(--white);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.card:hover {
Expand All @@ -19,6 +19,9 @@
.card.horizontal {
flex-direction: row;
}
.card.horizontal .card__image {
max-height: 10rem;
}
.card.text-only .card__image {
display: none;
}
Expand All @@ -36,12 +39,11 @@
width: 2rem;
justify-content: center;
align-items: center;
right: 1rem;
right: 0.5rem;
top: 0.5rem;
color: #bbbbbb;
bottom: 1rem;
background: #edeeef;
border-radius: 50%;
transition: var(--transition);
cursor: pointer;
}
.card__close:hover {
Expand Down Expand Up @@ -130,5 +132,3 @@
flex-direction: column;
padding: 0.75rem 1.25rem 1.25rem 1.25rem;
}

/*# sourceMappingURL=card.css.map */
100 changes: 98 additions & 2 deletions docs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
<div class="theme-switcher">
<label class="theme-switcher__label" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="theme-switcher__thumb round"></div>
<div class="sun"></div>
</label>
</div>
</div>
Expand Down Expand Up @@ -168,7 +168,7 @@ <h4>Demo</h4>
<section id="badge">
<h1>Badge</h1>
<p>Badges are used to display text or status.</p>
<h4>Demo</h4>
<h4>Pill Badges</h4>
<div class="well">
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
Expand All @@ -195,6 +195,102 @@ <h4>Demo</h4>
Example of Text with Badge
<span class="badge badge-success">new</span>
</p>
</code>
</pre>
<h4>Avatar Badges</h4>
<div class="well">
<div class="avatar-badge">
<div class="avatar avatar-sm">
<img src="https://picsum.photos/200/200?random=4" alt="picsum" />
</div>
<span class="badge badge-success"></span>
</div>
<div class="avatar-badge">
<div class="avatar avatar-sm">
<img src="https://picsum.photos/200/200?random=4" alt="picsum" />
</div>
<span class="badge badge-warning"></span>
</div>
<div class="avatar-badge">
<div class="avatar avatar-sm">
<img src="https://picsum.photos/200/200?random=4" alt="picsum" />
</div>
<span class="badge badge-primary"></span>
</div>
<div class="avatar-badge">
<div class="avatar avatar-sm">
<img src="https://picsum.photos/200/200?random=4" alt="picsum" />
</div>
<span class="badge badge-secondary"></span>
</div>
</div>

<pre>
<code class="html">
<div class="avatar-badge">
<div class="avatar avatar-sm">
<img src="https://picsum.photos/200/200?random=4" alt="picsum" />
</div>
<span class="badge badge-success"></span>
</div>
<div class="avatar-badge">
<div class="avatar avatar-sm">
<img src="https://picsum.photos/200/200?random=4" alt="picsum" />
</div>
<span class="badge badge-warning"></span>
</div>
<div class="avatar-badge">
<div class="avatar avatar-sm">
<img src="https://picsum.photos/200/200?random=4" alt="picsum" />
</div>
<span class="badge badge-primary"></span>
</div>
<div class="avatar-badge">
<div class="avatar avatar-sm">
<img src="https://picsum.photos/200/200?random=4" alt="picsum" />
</div>
<span class="badge badge-secondary"></span>
</div>
</code>
</pre>
<h4>Icon Badge</h4>
<div class="well">
<div class="icon-badge">
<i class="fa fa-bell"></i>
<span class="badge badge-success"></span>
</div>
<div class="icon-badge">
<i class="fa fa-bell"></i>
<span class="badge badge-warning"></span>
</div>
<div class="icon-badge">
<i class="fa fa-bell"></i>
<span class="badge badge-primary"></span>
</div>
<div class="icon-badge">
<i class="fa fa-bell"></i>
<span class="badge badge-secondary"></span>
</div>
</div>

<pre>
<code class="html">
<div class="icon-badge">
<i class="fa fa-bell"></i>
<span class="badge badge-success"></span>
</div>
<div class="icon-badge">
<i class="fa fa-bell"></i>
<span class="badge badge-warning"></span>
</div>
<div class="icon-badge">
<i class="fa fa-bell"></i>
<span class="badge badge-primary"></span>
</div>
<div class="icon-badge">
<i class="fa fa-bell"></i>
<span class="badge badge-secondary"></span>
</div>
</code>
</pre>
</section>
Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
<div class="theme-switcher">
<label class="theme-switcher__label" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="theme-switcher__thumb round"></div>
<div class="sun"></div>
</label>
</div>
</div>
Expand Down
6 changes: 6 additions & 0 deletions js/docs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,12 @@ document.querySelectorAll(".sidebar a").forEach((el) => {
.to(".active", {
opacity: 0,
duration: 0.5,
onanimationstart: () => {
window.scrollTo({
top: 0,
behavior: "smooth",
});
},
})
.set(".active", {
display: "none",
Expand Down
60 changes: 32 additions & 28 deletions styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,45 +49,51 @@ body {
align-items: center;
}
.header .theme-switcher__label {
display: inline-block;
display: flex;
align-items: center;
height: 2.1rem;
position: relative;
width: 3.8rem;
}
.header .theme-switcher__label input {
display: none;
}
.header .theme-switcher__thumb {
background-color: #ccc;
bottom: 0;
.header .theme-switcher .sun {
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: 0.4s;
}
.header .theme-switcher__thumb:before {
background-color: #fff;
bottom: 4px;
box-sizing: border-box;
position: relative;
display: block;
width: 24px;
height: 24px;
background: linear-gradient(to bottom, currentColor 4px, transparent 0) no-repeat 5px -6px/2px 6px,
linear-gradient(to bottom, currentColor 4px, transparent 0) no-repeat 5px 14px/2px 6px,
linear-gradient(to bottom, currentColor 4px, transparent 0) no-repeat -8px 5px/6px 2px,
linear-gradient(to bottom, currentColor 4px, transparent 0) no-repeat 14px 5px/6px 2px;
border-radius: 100px;
box-shadow: inset 0 0 0 2px;
border: 6px solid transparent;
}
.header .theme-switcher .sun:after,
.header .theme-switcher .sun:before {
content: "";
height: 1.6rem;
left: 4px;
display: block;
box-sizing: border-box;
position: absolute;
transition: 0.4s;
width: 1.7rem;
}
.header .theme-switcher__thumb.round {
border-radius: 1rem;
width: 24px;
height: 2px;
border-right: 4px solid;
border-left: 4px solid;
left: -6px;
top: 5px;
}
.header .theme-switcher__thumb.round:before {
border-radius: 50%;
.header .theme-switcher .sun:before {
transform: rotate(-45deg);
}
.header .theme-switcher input:checked + .theme-switcher__thumb {
background-color: var(--primary);
.header .theme-switcher .sun:after {
transform: rotate(45deg);
}
.header .theme-switcher input:checked + .theme-switcher__thumb:before {
transform: translateX(1.6rem);
.header .theme-switcher input:checked + .sun {
color: var(--primary);
}

.container {
Expand Down Expand Up @@ -181,5 +187,3 @@ body {
.footer.home-footer {
height: auto;
}

/*# sourceMappingURL=index.css.map */