mirror of
https://github.com/jenil/chota.git
synced 2023-08-10 21:13:07 +03:00
v0.7.0
This commit is contained in:
Jenil Gogari
parent
3e86397694
commit
fcae86f912
14
dist/chota.css
vendored
14
dist/chota.css
vendored
@ -1,4 +1,4 @@
|
||||
/*! chota.css v0.6.2 | MIT License | github.com/jenil/chota */
|
||||
/*! chota.css v0.7.0 | MIT License | github.com/jenil/chota */
|
||||
:root {
|
||||
--color-primary: #14854F;
|
||||
--color-lightGrey: #d2d6dd;
|
||||
@ -854,22 +854,22 @@ details.dropdown > :last-child {
|
||||
.pull-left {
|
||||
float: left !important;
|
||||
}
|
||||
.is-text-center {
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.is-text-left {
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
.is-text-right {
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
.is-text-uppercase {
|
||||
.text-uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.is-text-lowercase {
|
||||
.text-lowercase {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
.is-text-capitalize {
|
||||
.text-capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.is-full-screen {
|
||||
|
||||
2
dist/chota.min.css
vendored
2
dist/chota.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1,51 +1,98 @@
|
||||
<section id="utilities">
|
||||
<h4>Utilities</h4>
|
||||
<p>You can apply these helper classes to almost any element, in order to alter its style.</p>
|
||||
<p>
|
||||
You can apply these helper classes to almost any element, in order to alter
|
||||
its style.
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>text-primary</code> - <span class="text-primary">Primary text</span></li>
|
||||
<li><code>text-light</code> - <span class="text-light">Light text</span></li>
|
||||
<li><code>text-white</code> - <span class="bg-primary text-white">White text</span></li>
|
||||
<li>
|
||||
<code>text-primary</code> - <span class="text-primary">Primary text</span>
|
||||
</li>
|
||||
<li>
|
||||
<code>text-light</code> - <span class="text-light">Light text</span>
|
||||
</li>
|
||||
<li>
|
||||
<code>text-white</code> -
|
||||
<span class="bg-primary text-white">White text</span>
|
||||
</li>
|
||||
<li><code>text-dark</code> - <span class="text-dark">Dark text</span></li>
|
||||
<li><code>text-grey</code> - <span class="text-grey">Grey text</span></li>
|
||||
<li><code>text-error</code> - <span class="text-error">Error text</span></li>
|
||||
<li><code>text-success</code> - <span class="text-success">Success text</span></li>
|
||||
<li><code>bg-primary</code> - <span class="bg-primary">primary background</span></li>
|
||||
<li><code>bg-light</code> - <span class="bg-light">Light background</span></li>
|
||||
<li>
|
||||
<code>text-error</code> - <span class="text-error">Error text</span>
|
||||
</li>
|
||||
<li>
|
||||
<code>text-success</code> - <span class="text-success">Success text</span>
|
||||
</li>
|
||||
<li>
|
||||
<code>bg-primary</code> -
|
||||
<span class="bg-primary">primary background</span>
|
||||
</li>
|
||||
<li>
|
||||
<code>bg-light</code> - <span class="bg-light">Light background</span>
|
||||
</li>
|
||||
<li><code>bg-dark</code> - <span class="bg-dark">Dark background</span></li>
|
||||
<li><code>bg-grey</code> - <span class="bg-grey">Grey background</span></li>
|
||||
<li><code>bg-error</code> - <span class="bg-error">Error background</span></li>
|
||||
<li><code>bg-success</code> - <span class="bg-success">Success background</span></li>
|
||||
<li><code>bd-primary</code> - <span class="bd-primary">primary border</span></li>
|
||||
<li>
|
||||
<code>bg-error</code> - <span class="bg-error">Error background</span>
|
||||
</li>
|
||||
<li>
|
||||
<code>bg-success</code> -
|
||||
<span class="bg-success">Success background</span>
|
||||
</li>
|
||||
<li>
|
||||
<code>bd-primary</code> - <span class="bd-primary">primary border</span>
|
||||
</li>
|
||||
<li><code>bd-light</code> - <span class="bd-light">Light border</span></li>
|
||||
<li><code>bd-dark</code> - <span class="bd-dark">Dark border</span></li>
|
||||
<li><code>bd-grey</code> - <span class="bd-grey">Grey border</span></li>
|
||||
<li><code>bd-error</code> - <span class="bd-error">Error border</span></li>
|
||||
<li><code>bd-success</code> - <span class="bd-success">Success border</span></li>
|
||||
<li>
|
||||
<code>bd-success</code> - <span class="bd-success">Success border</span>
|
||||
</li>
|
||||
<li><code>pull-right</code> - floats an element to the right</li>
|
||||
<li><code>pull-left</code> - floats an element to the left</li>
|
||||
<li><code>is-text-center</code> - center aligns text</li>
|
||||
<li><code>is-text-left</code> - left aligns text</li>
|
||||
<li><code>is-text-right</code> - right aligns text</li>
|
||||
<li><code>is-text-uppercase</code> - text to uppercase</li>
|
||||
<li><code>is-text-lowercase</code> - text to lowercase</li>
|
||||
<li><code>is-text-capitalize</code> - capitalizes text</li>
|
||||
<li><code>text-center</code> - center aligns text</li>
|
||||
<li><code>text-left</code> - left aligns text</li>
|
||||
<li><code>text-right</code> - right aligns text</li>
|
||||
<li><code>text-uppercase</code> - text to uppercase</li>
|
||||
<li><code>text-lowercase</code> - text to lowercase</li>
|
||||
<li><code>text-capitalize</code> - capitalizes text</li>
|
||||
<li><code>is-full-screen</code> - makes the element 100% view height</li>
|
||||
<li><code>is-full-width</code> - make the element 100% width</li>
|
||||
<li><code>is-vertical-align</code> - vertically centers element using flex</li>
|
||||
<li><code>is-horizontal-align</code> - horizontal centers element using flex</li>
|
||||
<li>
|
||||
<code>is-vertical-align</code> - vertically centers element using flex
|
||||
</li>
|
||||
<li>
|
||||
<code>is-horizontal-align</code> - horizontal centers element using flex
|
||||
</li>
|
||||
<li><code>is-center</code> - centers element using flex</li>
|
||||
<li><code>is-right</code> - right aligns element using flex</li>
|
||||
<li><code>is-left</code> - left aligns element using flex</li>
|
||||
<li><code>is-fixed</code> - fixed positioned element</li>
|
||||
<li><code>is-paddingless</code> - removes any padding</li>
|
||||
<li><code>is-marginless</code> - removes any margin</li>
|
||||
<li><code>is-round</code> - make the element round</li>
|
||||
<li><code>is-rounded</code> - make the element round</li>
|
||||
<li><code>clearfix</code> - clears the floats</li>
|
||||
<li><code>is-hidden</code> - hides the element completely</li>
|
||||
<li><code>hide-xs</code> - hides the element for screens <600px</li>
|
||||
<li><code>hide-sm</code> - hides the element for screens >=600px and <900px</li>
|
||||
<li><code>hide-md</code> - hides the element for screens >=900px and <1200px</li>
|
||||
<li>
|
||||
<code>hide-sm</code> - hides the element for screens >=600px and
|
||||
<900px
|
||||
</li>
|
||||
<li>
|
||||
<code>hide-md</code> - hides the element for screens >=900px and
|
||||
<1200px
|
||||
</li>
|
||||
<li><code>hide-lg</code> - hides the element for screens >=1200px</li>
|
||||
<li><code>hide-pr</code> - hides the element for printing</li>
|
||||
</ul>
|
||||
<h4>Details</h4>
|
||||
<p>You can have a <code><details></code> with a <code>.dropdown</code> class to defines a toggle-able block of content with a summary and additional details.</p>
|
||||
<details class="dropdown">
|
||||
<summary>Read more</summary>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec
|
||||
nulla vitae mollis.
|
||||
</p>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
||||
<title>chota - A micro CSS framework</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="https://unpkg.com/chota">
|
||||
<link rel="stylesheet" href="./chota.css">
|
||||
<link rel="stylesheet" href="./doc-styles.css">
|
||||
<link rel="icon" type="image/png" href="favicon.png" />
|
||||
</head>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "chota",
|
||||
"version": "0.6.3",
|
||||
"version": "0.7.0",
|
||||
"description": "A really small CSS framework",
|
||||
"main": "dist/chota.min.css",
|
||||
"scripts": {
|
||||
|
||||
@ -84,27 +84,27 @@
|
||||
float: left !important;
|
||||
}
|
||||
|
||||
.is-text-center {
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.is-text-left {
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.is-text-right {
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.is-text-uppercase {
|
||||
.text-uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.is-text-lowercase {
|
||||
.text-lowercase {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.is-text-capitalize {
|
||||
.text-capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
/*! chota.css v0.6.2 | MIT License | github.com/jenil/chota */
|
||||
/*! chota.css v0.7.0 | MIT License | github.com/jenil/chota */
|
||||
@import "_base.css";
|
||||
@import "_grid.css";
|
||||
@import "_form.css";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user