mirror/chota
1
0
Fork 0
mirror of https://github.com/jenil/chota.git synced 2023-08-10 21:13:07 +03:00
Code Issues Projects Releases Wiki Activity

Added more color options and updated codebase accordingly

Browse Source
This commit is contained in:
Anirudhwa Ankon 2023-04-13 23:46:37 +06:00
parent e33dff4804
commit b4c83f266d
6 changed files with 135 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
dist/chota.css vendored
View File

@ -10,6 +10,9 @@
--color-darkGrey: #3f4144;
--color-error: #d43939;
--color-success: #28bd14;
--color-warning: #ffc107;
--color-info: #0dcaf0;
--color-link: #3273dc;
--grid-maxWidth: 120rem;
--grid-gutter: 2rem;
--font-size: 1.6rem;
@ -593,6 +596,15 @@ textarea.success {
.button.success {
background-color: var(--color-success);
}
.button.warning {
background-color: var(--color-warning);
}
.button.info {
background-color: var(--color-info);
}
.button.link {
background-color: var(--color-link);
}
.button.outline {
background-color: transparent;
border-color: var(--color-lightGrey);
@ -609,6 +621,18 @@ textarea.success {
border-color: var(--color-darkGrey);
color: var(--color-darkGrey);
}
.button.outline.warning {
border-color: var(--color-warning);
color: var(--color-warning);
}
.button.outline.info {
border-color: var(--color-info);
color: var(--color-info);
}
.button.outline.link {
border-color: var(--color-link);
color: var(--color-link);
}
.button.clear {
background-color: transparent;
border-color: transparent;
@ -835,6 +859,15 @@ details.dropdown > :last-child {
.bg-success {
background-color: var(--color-success) !important;
}
.bg-warning {
background-color: var(--color-warning) !important;
}
.bg-info {
background-color: var(--color-info) !important;
}
.bg-link {
background-color: var(--color-link) !important;
}
.bd-primary {
border: 1px solid var(--color-primary) !important;
}
@ -853,6 +886,15 @@ details.dropdown > :last-child {
.bd-success {
border: 1px solid var(--color-success) !important;
}
.bd-warning {
border: 1px solid var(--color-warning) !important;
}
.bd-info {
border: 1px solid var(--color-info) !important;
}
.bd-link {
border: 1px solid var(--color-link) !important;
}
.text-primary {
color: var(--color-primary) !important;
}
@ -874,6 +916,15 @@ details.dropdown > :last-child {
.text-white {
color: #fff !important;
}
.text-warning {
color: var(--color-warning) !important;
}
.text-info {
color: var(--color-info) !important;
}
.text-link {
color: var(--color-link) !important;
}
/* Position & alignment */
.pull-right {
float: right !important;

2
dist/chota.min.css vendored
View File

File diff suppressed because one or more lines are too long

3
src/_base.css
View File

@ -7,6 +7,9 @@
--color-darkGrey: #3f4144;
--color-error: #d43939;
--color-success: #28bd14;
--color-warning: #ffc107;
--color-info: #0dcaf0;
--color-link: #3273dc;
--grid-maxWidth: 120rem;
--grid-gutter: 2rem;
--font-size: 1.6rem;

27
src/_form.css
View File

@ -154,6 +154,18 @@ textarea.success {
background-color: var(--color-success);
}
.button.warning {
background-color: var(--color-warning);
}
.button.info {
background-color: var(--color-info);
}
.button.link {
background-color: var(--color-link);
}
.button.outline {
background-color: transparent;
border-color: var(--color-lightGrey);
@ -174,6 +186,21 @@ textarea.success {
color: var(--color-darkGrey);
}
.button.outline.warning {
border-color: var(--color-warning);
color: var(--color-warning);
}
.button.outline.info {
border-color: var(--color-info);
color: var(--color-info);
}
.button.outline.link {
border-color: var(--color-link);
color: var(--color-link);
}
.button.clear {
background-color: transparent;
border-color: transparent;

36
src/_util.css
View File

@ -23,6 +23,18 @@
background-color: var(--color-success) !important;
}
.bg-warning {
background-color: var(--color-warning) !important;
}
.bg-info {
background-color: var(--color-info) !important;
}
.bg-link {
background-color: var(--color-link) !important;
}
.bd-primary {
border: 1px solid var(--color-primary) !important;
}
@ -47,6 +59,18 @@
border: 1px solid var(--color-success) !important;
}
.bd-warning {
border: 1px solid var(--color-warning) !important;
}
.bd-info {
border: 1px solid var(--color-info) !important;
}
.bd-link {
border: 1px solid var(--color-link) !important;
}
.text-primary {
color: var(--color-primary) !important;
}
@ -75,6 +99,18 @@
color: #fff !important;
}
.text-warning {
color: var(--color-warning) !important;
}
.text-info {
color: var(--color-info) !important;
}
.text-link {
color: var(--color-link) !important;
}
/* Position & alignment */
.pull-right {
float: right !important;

18
test/index.html
View File

@ -19,7 +19,7 @@
<body>
<div id="top" class="container" role="document">
<header role="banner">
<h1 class="pull-right" style="margin: 0;">
<h1 class="pull-right" style="margin: 0">
<a href="javascript:void(0)" onclick="switchMode(this)">☀️</a>
</h1>
<h1>Chota CSS</h1>
@ -737,6 +737,11 @@ P R E F O R M A T T E D T E X T
<a href="#" class="button error">a.button.error</a>
<a href="#" class="button success">a.button.success</a>
</p>
<p>
<a href="#" class="button warning">a.button.warning</a>
<a href="#" class="button info">a.button.info</a>
<a href="#" class="button link">a.button.link</a>
</p>
<p>
<a href="#" class="button outline">a.button.outline</a>
<a href="#" class="button outline primary"
@ -748,6 +753,17 @@ P R E F O R M A T T E D T E X T
<a href="#" class="button outline dark"
>a.button.outline.dark</a
>
</p>
<p>
<a href="#" class="button outline warning"
>a.button.outline.warning</a
>
<a href="#" class="button outline info"
>a.button.outline.info</a
>
<a href="#" class="button outline link"
>a.button.outline.link</a
>
<a href="#" class="button clear">a.button.clear</a>
</p>
</fieldset>