diff --git a/components/badge/badge.css b/components/badge/badge.css index 53887ff..65d8d27 100644 --- a/components/badge/badge.css +++ b/components/badge/badge.css @@ -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 { + 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 { @@ -30,5 +76,3 @@ .badge-round { border-radius: 50rem; } - -/*# sourceMappingURL=badge.css.map */ diff --git a/components/card/card.css b/components/card/card.css index d8484f3..ce27ae2 100644 --- a/components/card/card.css +++ b/components/card/card.css @@ -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 { @@ -19,6 +19,9 @@ .card.horizontal { flex-direction: row; } +.card.horizontal .card__image { + max-height: 10rem; +} .card.text-only .card__image { display: none; } @@ -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 { @@ -130,5 +132,3 @@ flex-direction: column; padding: 0.75rem 1.25rem 1.25rem 1.25rem; } - -/*# sourceMappingURL=card.css.map */ diff --git a/docs.html b/docs.html index c2f903f..df55530 100644 --- a/docs.html +++ b/docs.html @@ -31,7 +31,7 @@
@@ -168,7 +168,7 @@

Demo

Badge

Badges are used to display text or status.

-

Demo

+

Pill Badges

Primary Secondary @@ -195,6 +195,102 @@

Demo

Example of Text with Badge new

+ + +

Avatar Badges

+
+
+
+ picsum +
+ +
+
+
+ picsum +
+ +
+
+
+ picsum +
+ +
+
+
+ picsum +
+ +
+
+ + 
+    
+

+  

+    picsum
+  

+  
+

+

+  

+    picsum
+  

+  
+

+

+  

+    picsum
+  

+  
+

+

+  

+    picsum
+  

+  
+

+      
+
+

Icon Badge

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + 
+    
+

+  
+  
+

+

+  
+  
+

+

+  
+  
+

+

+  
+  
+
diff --git a/index.html b/index.html index 6a6d1d7..a62f0f2 100644 --- a/index.html +++ b/index.html @@ -28,7 +28,7 @@
diff --git a/js/docs.js b/js/docs.js index 8edca3a..9ab1956 100644 --- a/js/docs.js +++ b/js/docs.js @@ -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", diff --git a/styles/index.css b/styles/index.css index 28274e1..e3da98d 100644 --- a/styles/index.css +++ b/styles/index.css @@ -49,7 +49,8 @@ body { align-items: center; } .header .theme-switcher__label { - display: inline-block; + display: flex; + align-items: center; height: 2.1rem; position: relative; width: 3.8rem; @@ -57,37 +58,42 @@ body { .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 { @@ -181,5 +187,3 @@ body { .footer.home-footer { height: auto; } - -/*# sourceMappingURL=index.css.map */