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

updates 🛠 🎨 🗺 🏷

Browse Source 
* remove iframe border 🛠
* fix for nav with logo & text  🗺
* new color & button style 🎨
* new component: tags 🏷
This commit is contained in:
Jenil Gogari 2017-11-16 19:44:45 -05:00
parent d50e7a8c2a
commit c48bf16923
9 changed files with 460 additions and 352 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
dist/chota.css vendored
View File

@ -2,6 +2,7 @@
:root { :root {
--primary-color: #1a9f60; --primary-color: #1a9f60;
--lightGrey-color: #d2d6dd; --lightGrey-color: #d2d6dd;
--darkGrey-color: #84868b;
--grid-maxWidth: 120rem; --grid-maxWidth: 120rem;
--grid-gutter: 2rem; --grid-gutter: 2rem;
--font-family: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; --font-family: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
@ -129,10 +130,12 @@ abbr[title] {
img { img {
max-width: 100%; max-width: 100%;
} }
fieldset, fieldset {
iframe {
border: 1px solid var(--lightGrey-color); border: 1px solid var(--lightGrey-color);
} }
iframe {
border: 0;
}
.container { .container {
max-width: var(--grid-maxWidth); max-width: var(--grid-maxWidth);
margin: 0 auto; margin: 0 auto;
@ -239,10 +242,10 @@ legend {
font-size: 0.8em; font-size: 0.8em;
letter-spacing: 0.1rem; letter-spacing: 0.1rem;
} }
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]), input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]),
select, select,
textarea, textarea,
textarea[type=text] { textarea[type="text"] {
font-family: inherit; font-family: inherit;
padding: 0.7rem 1rem; padding: 0.7rem 1rem;
border-radius: 4px; border-radius: 4px;
@ -252,16 +255,16 @@ textarea[type=text] {
display: block; display: block;
width: 100%; width: 100%;
} }
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):hover, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]):hover,
select:hover, select:hover,
textarea:hover, textarea:hover,
textarea[type=text]:hover { textarea[type="text"]:hover {
border-color: #aaa; border-color: #aaa;
} }
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):focus, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]):focus,
select:focus, select:focus,
textarea:focus, textarea:focus,
textarea[type=text]:focus { textarea[type="text"]:focus {
outline: none; outline: none;
border-color: var(--primary-color); border-color: var(--primary-color);
} }
@ -279,9 +282,9 @@ select {
} }
/* BUTTONS */ /* BUTTONS */
.button, .button,
[type=button], [type="button"],
[type=reset], [type="reset"],
[type=submit], [type="submit"],
button { button {
padding: 1rem 2.5rem; padding: 1rem 2.5rem;
color: #333; color: #333;
@ -300,16 +303,16 @@ button {
margin-left: 1rem; margin-left: 1rem;
} }
.button:hover, .button:hover,
[type=button]:hover, [type="button"]:hover,
[type=reset]:hover, [type="reset"]:hover,
[type=submit]:hover, [type="submit"]:hover,
button:hover { button:hover {
opacity: 0.8; opacity: 0.8;
} }
.button:active, .button:active,
[type=button]:active, [type="button"]:active,
[type=reset]:active, [type="reset"]:active,
[type=submit]:active, [type="submit"]:active,
button:active { button:active {
transform: scale(0.98); transform: scale(0.98);
} }
@ -321,11 +324,15 @@ button[disabled]:hover {
cursor: not-allowed; cursor: not-allowed;
} }
.button.primary, .button.primary,
[type=submit] { .button.secondary,
[type="submit"] {
color: #fff; color: #fff;
background-color: #000; background-color: #000;
background: var(--primary-color); background: var(--primary-color);
} }
.button.secondary {
background: var(--darkGrey-color);
}
.button.outline { .button.outline {
background-color: transparent; background-color: transparent;
border: 1px solid var(--lightGrey-color); border: 1px solid var(--lightGrey-color);
@ -334,6 +341,10 @@ button[disabled]:hover {
border-color: var(--primary-color); border-color: var(--primary-color);
color: var(--primary-color); color: var(--primary-color);
} }
.button.outline.secondary {
border-color: var(--darkGrey-color);
color: var(--darkGrey-color);
}
.button.clear { .button.clear {
background-color: transparent; background-color: transparent;
border-color: transparent; border-color: transparent;
@ -407,6 +418,9 @@ button[disabled]:hover {
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
} }
.nav .brand img {
padding-right: 1rem;
}
.nav .button { .nav .button {
margin: auto 1rem; margin: auto 1rem;
} }
@ -449,6 +463,26 @@ button[disabled]:hover {
-ms-flex: 1; -ms-flex: 1;
flex: 1; flex: 1;
} }
.tag {
display: inline-block;
border: 1px solid var(--lightGrey-color);
text-transform: uppercase;
color: var(--darkGrey-color);
padding: 0.5rem;
line-height: 1;
letter-spacing: 0.5px;
}
.tag.is-small {
padding: 0.4rem;
font-size: 0.75em;
}
.tag.is-large {
padding: 0.7rem;
font-size: 1.125em;
}
.tag+.tag {
margin-left: 1rem;
}
.pull-right { .pull-right {
float: right; float: right;
} }

2
dist/chota.min.css vendored
View File

File diff suppressed because one or more lines are too long

8
src/_base.css
View File

@ -1,6 +1,7 @@
:root { :root {
--primary-color: #1a9f60; --primary-color: #1a9f60;
--lightGrey-color: #d2d6dd; --lightGrey-color: #d2d6dd;
--darkGrey-color: #84868b;
--grid-maxWidth: 120rem; --grid-maxWidth: 120rem;
--grid-gutter: 2rem; --grid-gutter: 2rem;
--font-family: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; --font-family: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
@ -155,7 +156,10 @@ img {
max-width: 100%; max-width: 100%;
} }
fieldset, fieldset {
iframe {
border: 1px solid var(--lightGrey-color); border: 1px solid var(--lightGrey-color);
} }
iframe {
border: 0;
}

42
src/_form.css
View File

@ -8,10 +8,10 @@ legend {
letter-spacing: 0.1rem; letter-spacing: 0.1rem;
} }
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]), input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]),
select, select,
textarea, textarea,
textarea[type=text] { textarea[type="text"] {
font-family: inherit; font-family: inherit;
padding: 0.7rem 1rem; padding: 0.7rem 1rem;
border-radius: 4px; border-radius: 4px;
@ -22,17 +22,17 @@ textarea[type=text] {
width: 100%; width: 100%;
} }
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):hover, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]):hover,
select:hover, select:hover,
textarea:hover, textarea:hover,
textarea[type=text]:hover { textarea[type="text"]:hover {
border-color: #aaa; border-color: #aaa;
} }
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):focus, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]):focus,
select:focus, select:focus,
textarea:focus, textarea:focus,
textarea[type=text]:focus { textarea[type="text"]:focus {
outline: none; outline: none;
border-color: var(--primary-color); border-color: var(--primary-color);
} }
@ -53,9 +53,9 @@ select {
/* BUTTONS */ /* BUTTONS */
.button, .button,
[type=button], [type="button"],
[type=reset], [type="reset"],
[type=submit], [type="submit"],
button { button {
padding: 1rem 2.5rem; padding: 1rem 2.5rem;
color: #333; color: #333;
@ -76,17 +76,17 @@ button {
} }
.button:hover, .button:hover,
[type=button]:hover, [type="button"]:hover,
[type=reset]:hover, [type="reset"]:hover,
[type=submit]:hover, [type="submit"]:hover,
button:hover { button:hover {
opacity: 0.8; opacity: 0.8;
} }
.button:active, .button:active,
[type=button]:active, [type="button"]:active,
[type=reset]:active, [type="reset"]:active,
[type=submit]:active, [type="submit"]:active,
button:active { button:active {
transform: scale(0.98); transform: scale(0.98);
} }
@ -100,12 +100,17 @@ button[disabled]:hover {
} }
.button.primary, .button.primary,
[type=submit] { .button.secondary,
[type="submit"] {
color: #fff; color: #fff;
background-color: #000; background-color: #000;
background: var(--primary-color); background: var(--primary-color);
} }
.button.secondary {
background: var(--darkGrey-color);
}
.button.outline { .button.outline {
background-color: transparent; background-color: transparent;
border: 1px solid var(--lightGrey-color); border: 1px solid var(--lightGrey-color);
@ -116,6 +121,11 @@ button[disabled]:hover {
color: var(--primary-color); color: var(--primary-color);
} }
.button.outline.secondary {
border-color: var(--darkGrey-color);
color: var(--darkGrey-color);
}
.button.clear { .button.clear {
background-color: transparent; background-color: transparent;
border-color: transparent; border-color: transparent;

4
src/_nav.css
View File

@ -64,6 +64,10 @@
padding-bottom: 0; padding-bottom: 0;
} }
.nav .brand img {
padding-right: 1rem;
}
.nav .button { .nav .button {
margin: auto 1rem; margin: auto 1rem;
} }

23
src/_tag.css Normal file
View File

@ -0,0 +1,23 @@
.tag {
display: inline-block;
border: 1px solid var(--lightGrey-color);
text-transform: uppercase;
color: var(--darkGrey-color);
padding: 0.5rem;
line-height: 1;
letter-spacing: 0.5px;
}
.tag.is-small {
padding: 0.4rem;
font-size: 0.75em;
}
.tag.is-large {
padding: 0.7rem;
font-size: 1.125em;
}
.tag+.tag {
margin-left: 1rem;
}

1
src/chota.css
View File

@ -6,5 +6,6 @@
@import "_nav.css"; @import "_nav.css";
@import "_card.css"; @import "_card.css";
@import "_tab.css"; @import "_tab.css";
@import "_tag.css";
@import "_util.css"; @import "_util.css";

50
test/components.html
View File

@ -14,6 +14,9 @@
</head> </head>
<body> <body>
<div class="container">
<h1>Nav</h1>
</div>
<nav class="nav"> <nav class="nav">
<div class="container"> <div class="container">
<div class="nav-left"> <div class="nav-left">
@ -30,6 +33,8 @@
</div> </div>
</nav> </nav>
<br> <br>
<hr>
<br>
<nav class="nav"> <nav class="nav">
<div class="nav-left"> <div class="nav-left">
<a class="brand" href="#">Logo</a> <a class="brand" href="#">Logo</a>
@ -44,7 +49,10 @@
</div> </div>
</nav> </nav>
<div class="container"> <div class="container">
<h1>Nav</h1> <section>
<br>
<hr>
<br>
<nav class="nav"> <nav class="nav">
<div class="nav-center"> <div class="nav-center">
<a href="#!1.html">Link 1</a> <a href="#!1.html">Link 1</a>
@ -53,10 +61,13 @@
<a href="#!" class="button primary">Button</a> <a href="#!" class="button primary">Button</a>
</div> </div>
</nav> </nav>
<br><hr><br> <br>
<hr>
<br>
<nav class="nav"> <nav class="nav">
<div class="nav-left"> <div class="nav-left">
<a class="brand" href="#">Brand</a> <a class="brand" href="#">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt=""> Brand</a>
</div> </div>
<div class="nav-right"> <div class="nav-right">
<div class="tabs"> <div class="tabs">
@ -66,7 +77,9 @@
</div> </div>
</div> </div>
</nav> </nav>
<br><hr><br> <br>
<hr>
<br>
<nav class="nav"> <nav class="nav">
<div class="nav-left"> <div class="nav-left">
<a class="brand" href="#"> <a class="brand" href="#">
@ -79,20 +92,27 @@
</div> </div>
</div> </div>
</nav> </nav>
<br><hr><br> <br>
<hr>
<br>
</section>
<section>
<h1>Tabs</h1> <h1>Tabs</h1>
<div class="tabs"> <div class="tabs">
<a class="active" href="#!1.html">Tab 1</a> <a class="active" href="#!1.html">Tab 1</a>
<a href="#!2.html">Tab 2</a> <a href="#!2.html">Tab 2</a>
<a href="#!3.html">Tab 3</a> <a href="#!3.html">Tab 3</a>
</div> </div>
<br> <hr> <br> <br>
<hr>
<br>
<div class="tabs is-full"> <div class="tabs is-full">
<a class="active" href="#!1.html">Tab 1</a> <a class="active" href="#!1.html">Tab 1</a>
<a href="#!2.html">Tab 2</a> <a href="#!2.html">Tab 2</a>
<a href="#!3.html">Tab 3</a> <a href="#!3.html">Tab 3</a>
</div> </div>
</section>
<section>
<h1>Card</h1> <h1>Card</h1>
<div class="row is-center"> <div class="row is-center">
<div class="col-4"> <div class="col-4">
@ -100,7 +120,8 @@
<header> <header>
<h4>Card title</h4> <h4>Card title</h4>
</header> </header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercit.</p>
<footer class="is-right"> <footer class="is-right">
<a href="#!" class="button primary">Submit</a> <a href="#!" class="button primary">Submit</a>
<a href="#!" class="button">Cancel</a> <a href="#!" class="button">Cancel</a>
@ -109,11 +130,19 @@
</div> </div>
<div class="col-6"> <div class="col-6">
<div class="card"> <div class="card">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
<p>Ipsa magnam consequatur itaque, mollitia non quam voluptate consequuntur dignissimos recusandae ea quas, nobis, debitis officia iure minus et dolore, reprehenderit sapiente iste. Eligendi eveniet ut qui at, deleniti enim!</p> magna aliqua. Ut enim ad minim veniam, quis nostrud exercit.</p>
<p>Ipsa magnam consequatur itaque, mollitia non quam voluptate consequuntur dignissimos recusandae ea quas, nobis,
debitis officia iure minus et dolore, reprehenderit sapiente iste. Eligendi eveniet ut qui at, deleniti enim!</p>
</div> </div>
</div> </div>
</div> </div>
</section>
<section>
<h1>Tag</h1>
<p><span class="tag">One</span><span class="tag">Two</span><span class="tag">Three</span><span class="tag is-small">Small</span><span class="tag is-large">Large</span></p>
</section>
<section>
<h1>Grid</h1> <h1>Grid</h1>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
@ -281,6 +310,7 @@
<div class="card is-center">.col-12</div> <div class="card is-center">.col-12</div>
</div> </div>
</div> </div>
</section>
</div> </div>
</body> </body>

2
test/index.html
View File

@ -465,8 +465,10 @@
<p> <p>
<a href="#" class="button">a.button</a> <a href="#" class="button">a.button</a>
<a href="#" class="button primary">a.button.primary</a> <a href="#" class="button primary">a.button.primary</a>
<a href="#" class="button secondary">a.button.secondary</a>
<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 clear">a.button.clear</a> <a href="#" class="button clear">a.button.clear</a>
</p> </p>
</fieldset> </fieldset>