Merge branch 'master' of github.com:squidit/css into production

dist/css/squid.css

@@ -16948,31 +16948,37 @@ h2,
 h3,
 h4,
 h5,
-h6 {
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
   margin: 0 auto 1rem;
   font-weight: 700; }
 
-h1 {
+h1, .h1 {
   font-size: 26px;
   line-height: 28px; }
 
-h2 {
+h2, .h2 {
   font-size: 24px;
   line-height: 26px; }
 
-h3 {
+h3, .h3 {
   font-size: 22px;
   line-height: 24px; }
 
-h4 {
+h4, .h4 {
   font-size: 20px;
   line-height: 22px; }
 
-h5 {
+h5, .h5 {
   font-size: 18px;
   line-height: 20px; }
 
-h6 {
+h6, .h6 {
   font-size: 16px;
   line-height: 18px; }
 
@@ -17029,6 +17035,11 @@ i {
   text-overflow: ellipsis;
   white-space: nowrap; }
 
+.text-ellipsis-more {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical; }
+
 .box-shadow, .tag-box:hover, .box, .card, .dropdown, .modal-content, .tabs-header li.active, .toast {
   box-shadow: 0px 4px 12px -5px var(--gray); }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squidit/css",
-  "version": "1.0.80",
+  "version": "1.0.81",
   "scripts": {
     "start": "gulp watch",
     "css": "sass src/scss/squid.scss:dist/css/squid.min.css --style compressed",

src/docs/src/content/typography.mdx

@@ -6,13 +6,91 @@ route: /content/typography
 
 # Typography
 
+Documentation and examples for typography.
+
 ## Heading
 
+| Heading | Exemple          |
+|---------|------------------|
+| h1      | <h1>Title 1</h1> |
+| h2      | <h2>Title 2</h2> |
+| h3      | <h3>Title 3</h3> |
+| h4      | <h4>Title 4</h4> |
+| h5      | <h5>Title 5</h5> |
+| h6      | <h6>Title 6</h6> |
+
+Code, using Html Tags or using classes:
+
 ```html
 <h1> Heading 1 </h1>
-<h2> Heading 2 <h2>
+<h2> Heading 2 </h2>
 <h3> Heading 3 </h3>
 <h4> Heading 4 </h4>
 <h5> Heading 5 </h5>
 <h6> Heading 6 </h6>
+```
+---
+```html
+<p class='h1'> Heading 1 </p>
+<p class='h2'> Heading 2 </p>
+<p class='h3'> Heading 3 </p>
+<p class='h4'> Heading 4 </p>
+<p class='h5'> Heading 5 </p>
+<p class='h6'> Heading 6 </p>
+```
+
+## Alignment
+
+Text-align are available like:
+
+<p class='text-center'>I`m a centered text</p>
+
+```html
+<p class='text-center'>I`m a centered text</p>
+```
+
+Some values for `text-align` are available with classes:
+
+| Property | Class            |
+|----------|------------------|
+| center   | text-center      |
+| left     | text-left        |
+| right    | text-right       |
+| justify  | text-justify     |
+
+## Weight
+
+Text-weight are available like:
+
+<p class='text-bold'>I`m a bold text</p>
+
+```html
+<p class='text-bold'>I`m a bold text</p>
+```
+
+Some values for `text-weight` are available with classes:
+
+| Value | Class        |
+|-------|--------------|
+| 100   | text-thin    |
+| 300   | text-light   |
+| 400   | text-regular |
+| 500   | text-medium  |
+| 700   | text-bold    |
+| 900   | text-black   |
+
+## Elipsis
+
+To add an ellipsis at the end of the text use the following classes:
+
+<p class='text-ellipsis'>I`m a One line ellipsis</p>
+
+```html
+<p class='text-ellipsis'>I`m a One line ellipsis</p>
+```
+
+<p class='text-ellipsis-more'>I`m a More than line ellipsis</p>
+
+```html
+<p class='text-ellipsis-more'>I`m a More than line ellipsis</p>
 ```

src/scss/general/_defaults.scss

@@ -103,37 +103,43 @@ h2,
 h3,
 h4,
 h5,
-h6 {
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
   margin: 0 auto 1rem;
   font-weight: 700;
 }
 
-h1 {
+h1, .h1 {
   font-size: 26px;
   line-height: 28px;
 }
 
-h2 {
+h2, .h2 {
   font-size: 24px;
   line-height: 26px;
 }
 
-h3 {
+h3, .h3 {
   font-size: 22px;
   line-height: 24px;
 }
 
-h4 {
+h4, .h4 {
   font-size: 20px;
   line-height: 22px;
 }
 
-h5 {
+h5, .h5 {
   font-size: 18px;
   line-height: 20px;
 }
 
-h6 {
+h6, .h6 {
   font-size: 16px;
   line-height: 18px;
 }

src/scss/helpers/_texts.scss

@@ -38,3 +38,9 @@ $weights: (
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.text-ellipsis-more {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}