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

fixes for utils and button

Browse Source
This commit is contained in:
Jenil Gogari 2019-03-23 17:57:38 -04:00
parent bc2ae5f390
commit a8b172a730
4 changed files with 57 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
dist/chota.css vendored
View File

@ -506,7 +506,7 @@ button {
color: var(--color-darkGrey); color: var(--color-darkGrey);
background: var(--color-lightGrey); background: var(--color-lightGrey);
border-radius: 4px; border-radius: 4px;
border: none; border: 1px solid transparent;
font-size: var(--font-size); font-size: var(--font-size);
line-height: 1; line-height: 1;
text-align: center; text-align: center;
@ -576,22 +576,18 @@ button:disabled:hover {
} }
.button.outline { .button.outline {
background-color: transparent; background-color: transparent;
-webkit-box-shadow: inset 0 0 0 1px var(--color-lightGrey); border-color: var(--color-lightGrey);
box-shadow: inset 0 0 0 1px var(--color-lightGrey);
} }
.button.outline.primary { .button.outline.primary {
-webkit-box-shadow: inset 0 0 0 1px var(--color-primary); border-color: var(--color-primary);
box-shadow: inset 0 0 0 1px var(--color-primary);
color: var(--color-primary); color: var(--color-primary);
} }
.button.outline.secondary { .button.outline.secondary {
-webkit-box-shadow: inset 0 0 0 1px var(--color-grey); border-color: var(--color-grey);
box-shadow: inset 0 0 0 1px var(--color-grey);
color: var(--color-grey); color: var(--color-grey);
} }
.button.outline.dark { .button.outline.dark {
-webkit-box-shadow: inset 0 0 0 1px var(--color-darkGrey); border-color: var(--color-darkGrey);
box-shadow: inset 0 0 0 1px var(--color-darkGrey);
color: var(--color-darkGrey); color: var(--color-darkGrey);
} }
.button.clear { .button.clear {
@ -777,68 +773,68 @@ button:disabled:hover {
} }
/* Colors */ /* Colors */
.bg-primary { .bg-primary {
background-color: var(--color-primary); background-color: var(--color-primary) !important;
} }
.bg-light { .bg-light {
background-color: var(--color-lightGrey); background-color: var(--color-lightGrey) !important;
} }
.bg-dark { .bg-dark {
background-color: var(--color-darkGrey); background-color: var(--color-darkGrey) !important;
} }
.bg-grey { .bg-grey {
background-color: var(--color-grey); background-color: var(--color-grey) !important;
} }
.bg-error { .bg-error {
background-color: var(--color-error); background-color: var(--color-error) !important;
} }
.bg-success { .bg-success {
background-color: var(--color-success); background-color: var(--color-success) !important;
} }
.bd-primary { .bd-primary {
border: 1px solid var(--color-primary); border: 1px solid var(--color-primary) !important;
} }
.bd-light { .bd-light {
border: 1px solid var(--color-lightGrey); border: 1px solid var(--color-lightGrey) !important;
} }
.bd-dark { .bd-dark {
border: 1px solid var(--color-darkGrey); border: 1px solid var(--color-darkGrey) !important;
} }
.bd-grey { .bd-grey {
border: 1px solid var(--color-grey); border: 1px solid var(--color-grey) !important;
} }
.bd-error { .bd-error {
border: 1px solid var(--color-error); border: 1px solid var(--color-error) !important;
} }
.bd-success { .bd-success {
border: 1px solid var(--color-success); border: 1px solid var(--color-success) !important;
} }
.text-primary { .text-primary {
color: var(--color-primary); color: var(--color-primary) !important;
} }
.text-light { .text-light {
color: var(--color-lightGrey); color: var(--color-lightGrey) !important;
} }
.text-dark { .text-dark {
color: var(--color-darkGrey); color: var(--color-darkGrey) !important;
} }
.text-grey { .text-grey {
color: var(--color-grey); color: var(--color-grey) !important;
} }
.text-error { .text-error {
color: var(--color-error); color: var(--color-error) !important;
} }
.text-success { .text-success {
color: var(--color-success); color: var(--color-success) !important;
} }
.text-white { .text-white {
color: #fff; color: #fff !important;
} }
/* Position & alignment */ /* Position & alignment */
.pull-right { .pull-right {
float: right; float: right !important;
} }
.pull-left { .pull-left {
float: left; float: left !important;
} }
.is-text-center { .is-text-center {
text-align: center; text-align: center;
@ -863,7 +859,7 @@ button:disabled:hover {
min-height: 100vh; min-height: 100vh;
} }
.is-full-width { .is-full-width {
width: 100%; width: 100% !important;
} }
.is-vertical-align { .is-vertical-align {
display: -webkit-box; display: -webkit-box;

10
src/_form.css
View File

@ -72,7 +72,7 @@ button {
color: var(--color-darkGrey); color: var(--color-darkGrey);
background: var(--color-lightGrey); background: var(--color-lightGrey);
border-radius: 4px; border-radius: 4px;
border: none; border: 1px solid transparent;
font-size: var(--font-size); font-size: var(--font-size);
line-height: 1; line-height: 1;
text-align: center; text-align: center;
@ -149,21 +149,21 @@ button:disabled:hover {
.button.outline { .button.outline {
background-color: transparent; background-color: transparent;
box-shadow: inset 0 0 0 1px var(--color-lightGrey); border-color: var(--color-lightGrey);
} }
.button.outline.primary { .button.outline.primary {
box-shadow: inset 0 0 0 1px var(--color-primary); border-color: var(--color-primary);
color: var(--color-primary); color: var(--color-primary);
} }
.button.outline.secondary { .button.outline.secondary {
box-shadow: inset 0 0 0 1px var(--color-grey); border-color: var(--color-grey);
color: var(--color-grey); color: var(--color-grey);
} }
.button.outline.dark { .button.outline.dark {
box-shadow: inset 0 0 0 1px var(--color-darkGrey); border-color: var(--color-darkGrey);
color: var(--color-darkGrey); color: var(--color-darkGrey);
} }

44
src/_util.css
View File

@ -1,87 +1,87 @@
/* Colors */ /* Colors */
.bg-primary { .bg-primary {
background-color: var(--color-primary); background-color: var(--color-primary) !important;
} }
.bg-light { .bg-light {
background-color: var(--color-lightGrey); background-color: var(--color-lightGrey) !important;
} }
.bg-dark { .bg-dark {
background-color: var(--color-darkGrey); background-color: var(--color-darkGrey) !important;
} }
.bg-grey { .bg-grey {
background-color: var(--color-grey); background-color: var(--color-grey) !important;
} }
.bg-error { .bg-error {
background-color: var(--color-error); background-color: var(--color-error) !important;
} }
.bg-success { .bg-success {
background-color: var(--color-success); background-color: var(--color-success) !important;
} }
.bd-primary { .bd-primary {
border: 1px solid var(--color-primary); border: 1px solid var(--color-primary) !important;
} }
.bd-light { .bd-light {
border: 1px solid var(--color-lightGrey); border: 1px solid var(--color-lightGrey) !important;
} }
.bd-dark { .bd-dark {
border: 1px solid var(--color-darkGrey); border: 1px solid var(--color-darkGrey) !important;
} }
.bd-grey { .bd-grey {
border: 1px solid var(--color-grey); border: 1px solid var(--color-grey) !important;
} }
.bd-error { .bd-error {
border: 1px solid var(--color-error); border: 1px solid var(--color-error) !important;
} }
.bd-success { .bd-success {
border: 1px solid var(--color-success); border: 1px solid var(--color-success) !important;
} }
.text-primary { .text-primary {
color: var(--color-primary); color: var(--color-primary) !important;
} }
.text-light { .text-light {
color: var(--color-lightGrey); color: var(--color-lightGrey) !important;
} }
.text-dark { .text-dark {
color: var(--color-darkGrey); color: var(--color-darkGrey) !important;
} }
.text-grey { .text-grey {
color: var(--color-grey); color: var(--color-grey) !important;
} }
.text-error { .text-error {
color: var(--color-error); color: var(--color-error) !important;
} }
.text-success { .text-success {
color: var(--color-success); color: var(--color-success) !important;
} }
.text-white { .text-white {
color: #fff; color: #fff !important;
} }
/* Position & alignment */ /* Position & alignment */
.pull-right { .pull-right {
float: right; float: right !important;
} }
.pull-left { .pull-left {
float: left; float: left !important;
} }
.is-text-center { .is-text-center {
@ -114,7 +114,7 @@
} }
.is-full-width { .is-full-width {
width: 100%; width: 100% !important;
} }
.is-vertical-align { .is-vertical-align {

4
test/index.html
View File

@ -5,7 +5,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elements</title> <title>Elements</title>
<link rel="stylesheet" href="../dist/chota.min.css"> <link rel="stylesheet" href="../dist/chota.css">
<!-- For dev --> <!-- For dev -->
<!-- <link rel="stylesheet" href="../dist/chota.css"> --> <!-- <link rel="stylesheet" href="../dist/chota.css"> -->
@ -520,6 +520,8 @@
<a href="#" class="button dark">a.button.dark</a> <a href="#" class="button dark">a.button.dark</a>
<a href="#" class="button error">a.button.error</a> <a href="#" class="button error">a.button.error</a>
<a href="#" class="button success">a.button.success</a> <a href="#" class="button success">a.button.success</a>
</p>
<p>
<a href="#" class="button outline">a.button.outline</a> <a href="#" class="button outline">a.button.outline</a>
<a href="#" class="button outline primary">a.button.outline.primary</a> <a href="#" class="button outline primary">a.button.outline.primary</a>
<a href="#" class="button outline secondary">a.button.outline.secondary</a> <a href="#" class="button outline secondary">a.button.outline.secondary</a>