Skip to content

Commit 5d930ee

Browse files
RayiumirRayiumir
committed
Update Docs to v1.13.0
1 parent bac82f8 commit 5d930ee

2 files changed

Lines changed: 289 additions & 2 deletions

File tree

‎dist/css/tani.css‎

Lines changed: 124 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
Name: Tani
33
Description: A utility-first framework with rich component library
44
Author: Raymond Baghumian
5-
Version: 1.12.0
5+
Version: 1.13.0
66
License: MIT
77
*/
88

@@ -593,6 +593,129 @@ p {
593593
border-radius: 10rem;
594594
}
595595

596+
/* ======================
597+
Alerts
598+
====================== */
599+
.alert {
600+
position: relative;
601+
padding: 0.75rem 1.25rem;
602+
margin-bottom: 1rem;
603+
border: 1px solid transparent;
604+
border-radius: var(--border-radius);
605+
}
606+
607+
.alert-heading {
608+
color: inherit;
609+
font-weight: 600;
610+
}
611+
612+
.alert-link {
613+
font-weight: 700;
614+
}
615+
616+
.alert-dismissible {
617+
padding-right: 3rem;
618+
}
619+
620+
.alert-dismissible .alert-close {
621+
position: absolute;
622+
top: 0;
623+
right: 0;
624+
padding: 0.75rem 1.25rem;
625+
color: inherit;
626+
background: transparent;
627+
border: none;
628+
font-size: 1.5rem;
629+
line-height: 1;
630+
cursor: pointer;
631+
opacity: 0.5;
632+
}
633+
634+
.alert-dismissible .alert-close:hover {
635+
opacity: 0.75;
636+
}
637+
638+
/* Alert colors */
639+
.alert-primary {
640+
color: #664400;
641+
background-color: #fff3e0;
642+
border-color: #ffe0b2;
643+
}
644+
645+
.alert-primary .alert-link {
646+
color: #4d3300;
647+
}
648+
649+
.alert-secondary {
650+
color: #0a4a6b;
651+
background-color: #d9edf7;
652+
border-color: #bce8f1;
653+
}
654+
655+
.alert-secondary .alert-link {
656+
color: #073a54;
657+
}
658+
659+
.alert-success {
660+
color: #155724;
661+
background-color: #d4edda;
662+
border-color: #c3e6cb;
663+
}
664+
665+
.alert-success .alert-link {
666+
color: #0b2e13;
667+
}
668+
669+
.alert-danger {
670+
color: #721c24;
671+
background-color: #f8d7da;
672+
border-color: #f5c6cb;
673+
}
674+
675+
.alert-danger .alert-link {
676+
color: #491217;
677+
}
678+
679+
.alert-warning {
680+
color: #856404;
681+
background-color: #fff3cd;
682+
border-color: #ffeaa7;
683+
}
684+
685+
.alert-warning .alert-link {
686+
color: #533f03;
687+
}
688+
689+
.alert-info {
690+
color: #055160;
691+
background-color: #cff4fc;
692+
border-color: #b6effb;
693+
}
694+
695+
.alert-info .alert-link {
696+
color: #033940;
697+
}
698+
699+
.alert-light {
700+
color: #636464;
701+
background-color: #fefefe;
702+
border-color: #fdfdfe;
703+
}
704+
705+
.alert-light .alert-link {
706+
color: #4a4a4a;
707+
}
708+
709+
.alert-dark {
710+
color: #141619;
711+
background-color: #d6d8d9;
712+
border-color: #c6c8ca;
713+
}
714+
715+
.alert-dark .alert-link {
716+
color: #000000;
717+
}
718+
596719
/* ======================
597720
Cards - Enhanced variety
598721
====================== */

‎index.html‎

Lines changed: 165 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@ <h1 class="docs-nav-title">Tani</h1>
105105
<li class="docs-nav-item"><a href="#forms" class="docs-nav-link">Forms</a></li>
106106
<li class="docs-nav-item"><a href="#pagination" class="docs-nav-link">Pagination</a></li>
107107
<li class="docs-nav-item"><a href="#accordion" class="docs-nav-link">Accordion</a></li>
108+
<li class="docs-nav-item"><a href="#alerts" class="docs-nav-link">Alerts</a></li>
108109
<li class="docs-nav-item"><a href="#utilities" class="docs-nav-link">Utility Classes</a></li>
109110
<li class="docs-nav-item"><a href="#typography" class="docs-nav-link">Typography</a></li>
110111
</ul>
@@ -116,7 +117,7 @@ <h1 class="docs-title">Tani</h1>
116117
<p class="docs-subtitle">Official Documentation for the Tani CSS Framework - A lightweight,
117118
utility-first CSS framework with rich component library</p>
118119
<div>
119-
<span class="docs-badge" style="background-color: #ffab58; color: white;">v1.12.0</span>
120+
<span class="docs-badge" style="background-color: #ffab58; color: white;">v1.13.0</span>
120121
<span class="docs-badge" style="background-color: #28a745; color: white;">Stable</span>
121122
</div>
122123
</header>
@@ -4032,6 +4033,169 @@ <h3 class="docs-subsection-title">JavaScript</h3>
40324033
</div>
40334034
</section>
40344035

4036+
<section id="alerts" class="docs-section">
4037+
<h2 class="docs-section-title">Alerts</h2>
4038+
<p>Alerts provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</p>
4039+
4040+
<div class="docs-subsection">
4041+
<h3 class="docs-subsection-title">Basic Alert</h3>
4042+
<div class="docs-component">
4043+
<div class="docs-component-preview">
4044+
<div class="alert" role="alert">
4045+
A simple default alert—check it out!
4046+
</div>
4047+
</div>
4048+
<div class="docs-component-code">
4049+
<button class="copy-button" onclick="copyCode(this)">Copy</button>
4050+
<pre><code class="language-html">&lt;div class="alert" role="alert"&gt;
4051+
A simple default alert—check it out!
4052+
&lt;/div&gt;</code></pre>
4053+
</div>
4054+
</div>
4055+
</div>
4056+
4057+
<div class="docs-subsection">
4058+
<h3 class="docs-subsection-title">Alert Variants</h3>
4059+
<div class="docs-component">
4060+
<div class="docs-component-preview">
4061+
<div class="alert alert-primary" role="alert">
4062+
This is a primary alert—check it out!
4063+
</div>
4064+
<div class="alert alert-secondary" role="alert">
4065+
This is a secondary alert—check it out!
4066+
</div>
4067+
<div class="alert alert-success" role="alert">
4068+
This is a success alert—check it out!
4069+
</div>
4070+
<div class="alert alert-danger" role="alert">
4071+
This is a danger alert—check it out!
4072+
</div>
4073+
<div class="alert alert-warning" role="alert">
4074+
This is a warning alert—check it out!
4075+
</div>
4076+
<div class="alert alert-info" role="alert">
4077+
This is an info alert—check it out!
4078+
</div>
4079+
<div class="alert alert-light" role="alert">
4080+
This is a light alert—check it out!
4081+
</div>
4082+
<div class="alert alert-dark" role="alert">
4083+
This is a dark alert—check it out!
4084+
</div>
4085+
</div>
4086+
<div class="docs-component-code">
4087+
<button class="copy-button" onclick="copyCode(this)">Copy</button>
4088+
<pre><code class="language-html">&lt;div class="alert alert-primary" role="alert"&gt;
4089+
This is a primary alert—check it out!
4090+
&lt;/div&gt;
4091+
4092+
&lt;div class="alert alert-secondary" role="alert"&gt;
4093+
This is a secondary alert—check it out!
4094+
&lt;/div&gt;
4095+
4096+
&lt;div class="alert alert-success" role="alert"&gt;
4097+
This is a success alert—check it out!
4098+
&lt;/div&gt;
4099+
4100+
&lt;div class="alert alert-danger" role="alert"&gt;
4101+
This is a danger alert—check it out!
4102+
&lt;/div&gt;
4103+
4104+
&lt;div class="alert alert-warning" role="alert"&gt;
4105+
This is a warning alert—check it out!
4106+
&lt;/div&gt;
4107+
4108+
&lt;div class="alert alert-info" role="alert"&gt;
4109+
This is an info alert—check it out!
4110+
&lt;/div&gt;
4111+
4112+
&lt;div class="alert alert-light" role="alert"&gt;
4113+
This is a light alert—check it out!
4114+
&lt;/div&gt;
4115+
4116+
&lt;div class="alert alert-dark" role="alert"&gt;
4117+
This is a dark alert—check it out!
4118+
&lt;/div&gt;</code></pre>
4119+
</div>
4120+
</div>
4121+
</div>
4122+
4123+
<div class="docs-subsection">
4124+
<h3 class="docs-subsection-title">Alert with Heading</h3>
4125+
<div class="docs-component">
4126+
<div class="docs-component-preview">
4127+
<div class="alert alert-success" role="alert">
4128+
<h4 class="alert-heading">Well done!</h4>
4129+
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
4130+
<hr>
4131+
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
4132+
</div>
4133+
</div>
4134+
<div class="docs-component-code">
4135+
<button class="copy-button" onclick="copyCode(this)">Copy</button>
4136+
<pre><code class="language-html">&lt;div class="alert alert-success" role="alert"&gt;
4137+
&lt;h4 class="alert-heading"&gt;Well done!&lt;/h4&gt;
4138+
&lt;p&gt;Aww yeah, you successfully read this important alert message.&lt;/p&gt;
4139+
&lt;hr&gt;
4140+
&lt;p class="mb-0"&gt;Whenever you need to, be sure to use margin utilities.&lt;/p&gt;
4141+
&lt;/div&gt;</code></pre>
4142+
</div>
4143+
</div>
4144+
</div>
4145+
4146+
<div class="docs-subsection">
4147+
<h3 class="docs-subsection-title">Alert with Links</h3>
4148+
<div class="docs-component">
4149+
<div class="docs-component-preview">
4150+
<div class="alert alert-primary" role="alert">
4151+
A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
4152+
</div>
4153+
<div class="alert alert-success" role="alert">
4154+
A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
4155+
</div>
4156+
</div>
4157+
<div class="docs-component-code">
4158+
<button class="copy-button" onclick="copyCode(this)">Copy</button>
4159+
<pre><code class="language-html">&lt;div class="alert alert-primary" role="alert"&gt;
4160+
A simple primary alert with &lt;a href="#" class="alert-link"&gt;an example link&lt;/a&gt;. Give it a click if you like.
4161+
&lt;/div&gt;
4162+
4163+
&lt;div class="alert alert-success" role="alert"&gt;
4164+
A simple success alert with &lt;a href="#" class="alert-link"&gt;an example link&lt;/a&gt;. Give it a click if you like.
4165+
&lt;/div&gt;</code></pre>
4166+
</div>
4167+
</div>
4168+
</div>
4169+
4170+
<div class="docs-subsection">
4171+
<h3 class="docs-subsection-title">Dismissible Alerts</h3>
4172+
<div class="docs-component">
4173+
<div class="docs-component-preview">
4174+
<div class="alert alert-warning alert-dismissible" role="alert" id="dismissibleAlert1">
4175+
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
4176+
<button type="button" class="alert-close" onclick="this.parentElement.style.display='none'" aria-label="Close">&times;</button>
4177+
</div>
4178+
<div class="alert alert-danger alert-dismissible" role="alert" id="dismissibleAlert2">
4179+
<strong>Oh snap!</strong> Change a few things up and try submitting again.
4180+
<button type="button" class="alert-close" onclick="this.parentElement.style.display='none'" aria-label="Close">&times;</button>
4181+
</div>
4182+
</div>
4183+
<div class="docs-component-code">
4184+
<button class="copy-button" onclick="copyCode(this)">Copy</button>
4185+
<pre><code class="language-html">&lt;div class="alert alert-warning alert-dismissible" role="alert"&gt;
4186+
&lt;strong&gt;Holy guacamole!&lt;/strong&gt; You should check in on some of those fields below.
4187+
&lt;button type="button" class="alert-close" onclick="this.parentElement.style.display='none'" aria-label="Close"&gt;&times;&lt;/button&gt;
4188+
&lt;/div&gt;
4189+
4190+
&lt;div class="alert alert-danger alert-dismissible" role="alert"&gt;
4191+
&lt;strong&gt;Oh snap!&lt;/strong&gt; Change a few things up and try submitting again.
4192+
&lt;button type="button" class="alert-close" onclick="this.parentElement.style.display='none'" aria-label="Close"&gt;&times;&lt;/button&gt;
4193+
&lt;/div&gt;</code></pre>
4194+
</div>
4195+
</div>
4196+
</div>
4197+
</section>
4198+
40354199
<section id="utilities" class="docs-section">
40364200
<h2 class="docs-section-title">Utility Classes</h2>
40374201
<p>Tani provides a comprehensive set of utility classes for common styling needs.</p>

0 commit comments

Comments
 (0)