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 to form, card and nav

Browse Source
This commit is contained in:
Jenil Gogari 2017-04-02 23:26:56 -04:00
parent 951c03006b
commit d4713e9f40
7 changed files with 46 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
dist/chota.css vendored
View File

@ -226,11 +226,10 @@ input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]
}
select{
-webkit-appearance:none;
background-color:#fafafa;
background:#fafafa no-repeat 1ex;
border:1px solid var(--lightGrey-color);
background-position:100%;
background-repeat:no-repeat;
background-size:1ex;
background-position:100%;
background-origin:content-box;
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' fill='#555'><polygon points='0,0 60,0 30,40'/></svg>");
}
@ -245,11 +244,14 @@ select{
border-radius:50%;
box-shadow:inset 0 0 0 3px #fff;
}
[type=radio]:checked{
[type=checkbox]:checked,[type=radio]:checked{
background-color:#000;
background-color:var(--primary-color);
}
[type=checkbox]:checked{
background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX9JREFUeNpi+P//PwMNsS4QbwBiLnQ5WlqqAsRP/0PARiBmoYfFkkB8+z8qWALEjLS0mB+IL/3HDibSymJQXB7/jx/UgNSCvU4lwAbEG4DYkwi1WUxUspQZiOcRaSkIWOAKMk0Sg3jaf+IBOIVjMyQWiH8DsR+RljaTYOkBWJ5GNwRk2R+ooh9A7ETA0jwSLL0ATfEYqRpkyVc0xR+A2AyHpdFA/I9IS0F5WhRbAWIEtQQbeAXE6lhC5jeRlj4GYgVsRaYK1HBCmmWgmuyxhAwu8BpaXjNgs/gYkYbcAGIXPCGDDkCOM8eVPkCEFhE+JhX8BGJnfAkTxgC57BOVLAXlihBC2RA9Vf+k0FJQKk8nJv+jCwQi5WNyQAWxpR02wRQS8icy6CKlmMUlUUGipfOQK3lKLAbhdhIKfWZS6258kiAfzCZg6V4gZiOn0UBIAcgn63BYehK50Ke2xQxQH+3FUoqJUtJMIlYhLxAfxVJu09xiWENuMxCrUaNhCBBgAOAVfjALa5TLAAAAAElFTkSuQmCC") var(--primary-color) no-repeat 50%;
background-repeat:no-repeat;
background-position:50%;
background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX9JREFUeNpi+P//PwMNsS4QbwBiLnQ5WlqqAsRP/0PARiBmoYfFkkB8+z8qWALEjLS0mB+IL/3HDibSymJQXB7/jx/UgNSCvU4lwAbEG4DYkwi1WUxUspQZiOcRaSkIWOAKMk0Sg3jaf+IBOIVjMyQWiH8DsR+RljaTYOkBWJ5GNwRk2R+ooh9A7ETA0jwSLL0ATfEYqRpkyVc0xR+A2AyHpdFA/I9IS0F5WhRbAWIEtQQbeAXE6lhC5jeRlj4GYgVsRaYK1HBCmmWgmuyxhAwu8BpaXjNgs/gYkYbcAGIXPCGDDkCOM8eVPkCEFhE+JhX8BGJnfAkTxgC57BOVLAXlihBC2RA9Vf+k0FJQKk8nJv+jCwQi5WNyQAWxpR02wRQS8icy6CKlmMUlUUGipfOQK3lKLAbhdhIKfWZS6258kiAfzCZg6V4gZiOn0UBIAcgn63BYehK50Ke2xQxQH+3FUoqJUtJMIlYhLxAfxVJu09xiWENuMxCrUaNhCBBgAOAVfjALa5TLAAAAAElFTkSuQmCC");
background-size:1rem;
}
.button,[type=button],[type=reset],[type=submit],button{
@ -282,6 +284,7 @@ button[disabled],button[disabled]:hover,input[disabled],input[disabled]:hover{
}
.button.primary,[type=submit]{
color:#fff;
background-color:#000;
background:var(--primary-color);
}
.button.outline{
@ -335,15 +338,17 @@ button[disabled],button[disabled]:hover,input[disabled],input[disabled]:hover{
display:flex;
align-items:center;
padding:1rem 2rem;
color:#555;
}
.nav .active:not(.button){
color:#000;
color:var(--primary-color);
}
.nav .brand{
margin:0;
font-size:1.75em;
padding-top:0;
padding-bottom:0;
}
.nav .brand a{
padding:0;
}
.nav .button{
margin:auto 1rem;
}
@ -352,6 +357,9 @@ button[disabled],button[disabled]:hover,input[disabled],input[disabled]:hover{
border-radius:4px;
box-shadow:0 0 2px rgba(0,0,0,.4);
}
.card p:last-child{
margin:0;
}
.card header>*{
margin-top:0;
margin-bottom:1rem;

2
dist/chota.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -4,7 +4,7 @@
"description": "A really small CSS framework",
"main": "dist/chota.min.css",
"scripts": {
"start": "browser-sync start --server --files '**/*.css' '**/*.html'",
"start": "browser-sync start --server --directory --files '**/*.css' '**/*.html'",
"build": "rm -r dist/ && yarn postcss && yarn postcss -- -x .min.css && yarn cssnano && yarn cssnano:min",
"postcss": "postcss ./src/chota.css -u postcss-import -d dist/ --no-map",
"cssnano": "cssnano ./dist/chota.css ./dist/chota.css --no-calc --no-core",

4
src/_card.css
View File

@ -4,6 +4,10 @@
box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}
.card p:last-child {
margin: 0;
}
.card header > * {
margin-top: 0;
margin-bottom: 1rem;

13
src/_form.css
View File

@ -39,11 +39,10 @@ textarea[type=text]:focus {
select {
-webkit-appearance: none;
background-color: #fafafa;
background: #fafafa no-repeat 1ex;
border: 1px solid var(--lightGrey-color);
background-position: right center;
background-repeat: no-repeat;
background-size: 1ex;
background-position: right center;
background-origin: content-box;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' fill='#555'><polygon points='0,0 60,0 30,40'/></svg>");
}
@ -63,11 +62,16 @@ select {
}
[type="radio"]:checked {
background-color: #000; /* fallback */
background-color: var(--primary-color);
}
[type="checkbox"]:checked {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX9JREFUeNpi+P//PwMNsS4QbwBiLnQ5WlqqAsRP/0PARiBmoYfFkkB8+z8qWALEjLS0mB+IL/3HDibSymJQXB7/jx/UgNSCvU4lwAbEG4DYkwi1WUxUspQZiOcRaSkIWOAKMk0Sg3jaf+IBOIVjMyQWiH8DsR+RljaTYOkBWJ5GNwRk2R+ooh9A7ETA0jwSLL0ATfEYqRpkyVc0xR+A2AyHpdFA/I9IS0F5WhRbAWIEtQQbeAXE6lhC5jeRlj4GYgVsRaYK1HBCmmWgmuyxhAwu8BpaXjNgs/gYkYbcAGIXPCGDDkCOM8eVPkCEFhE+JhX8BGJnfAkTxgC57BOVLAXlihBC2RA9Vf+k0FJQKk8nJv+jCwQi5WNyQAWxpR02wRQS8icy6CKlmMUlUUGipfOQK3lKLAbhdhIKfWZS6258kiAfzCZg6V4gZiOn0UBIAcgn63BYehK50Ke2xQxQH+3FUoqJUtJMIlYhLxAfxVJu09xiWENuMxCrUaNhCBBgAOAVfjALa5TLAAAAAElFTkSuQmCC") var(--primary-color) no-repeat center;
background-color: #000; /* fallback */
background-color: var(--primary-color);
background-repeat: no-repeat;
background-position: center;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX9JREFUeNpi+P//PwMNsS4QbwBiLnQ5WlqqAsRP/0PARiBmoYfFkkB8+z8qWALEjLS0mB+IL/3HDibSymJQXB7/jx/UgNSCvU4lwAbEG4DYkwi1WUxUspQZiOcRaSkIWOAKMk0Sg3jaf+IBOIVjMyQWiH8DsR+RljaTYOkBWJ5GNwRk2R+ooh9A7ETA0jwSLL0ATfEYqRpkyVc0xR+A2AyHpdFA/I9IS0F5WhRbAWIEtQQbeAXE6lhC5jeRlj4GYgVsRaYK1HBCmmWgmuyxhAwu8BpaXjNgs/gYkYbcAGIXPCGDDkCOM8eVPkCEFhE+JhX8BGJnfAkTxgC57BOVLAXlihBC2RA9Vf+k0FJQKk8nJv+jCwQi5WNyQAWxpR02wRQS8icy6CKlmMUlUUGipfOQK3lKLAbhdhIKfWZS6258kiAfzCZg6V4gZiOn0UBIAcgn63BYehK50Ke2xQxQH+3FUoqJUtJMIlYhLxAfxVJu09xiWENuMxCrUaNhCBBgAOAVfjALa5TLAAAAAElFTkSuQmCC");
background-size: 1rem;
}
/* BUTTONS */
@ -122,6 +126,7 @@ button[disabled]:hover {
.button.primary,
[type=submit] {
color: #fff;
background-color: #000;
background: var(--primary-color);
}

12
src/_nav.css
View File

@ -50,18 +50,20 @@
display: flex;
align-items: center;
padding: 1rem 2rem;
color: #555;
}
.nav .active:not(.button) {
color: #000; /* fallback */
color: var(--primary-color);
}
.nav .brand {
margin: 0;
font-size: 1.75em;
padding-top: 0;
padding-bottom: 0;
}
.nav .brand a {
padding: 0;
}
.nav .button {
margin: auto 1rem;
}

18
test/components.html
View File

@ -4,7 +4,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grids</title>
<title>Components</title>
<link rel="stylesheet" href="../dist/chota.min.css">
<style>
.nav {
@ -17,9 +17,7 @@
<nav class="nav">
<div class="container">
<div class="nav-left">
<h2 class="brand">
<a href="#">Logo</a>
</h2>
<a class="brand" href="#">Logo</a>
</div>
<div class="nav-center">
<a class="button outline" href="#">Centered</a>
@ -27,16 +25,14 @@
<div class="nav-right">
<a href="#!1.html">Link 1</a>
<a href="#!2.html">Link 2</a>
<a href="#!3.html">Link 3</a>
<a href="#!3.html" class="active">Link 3</a>
</div>
</div>
</nav>
<br>
<nav class="nav">
<div class="nav-left">
<h2 class="brand">
<a href="#">Logo</a>
</h2>
<a class="brand" href="#">Logo</a>
</div>
<div class="nav-center">
<a href="#">Centered</a>
@ -53,20 +49,20 @@
<div class="nav-center">
<a href="#!1.html">Link 1</a>
<a href="#!2.html">Link 2</a>
<a href="#!3.html">Link 3</a>
<a href="#!3.html" class="active">Link 3</a>
<a href="#!" class="button primary">Button</a>
</div>
</nav>
<br><hr><br>
<nav class="nav">
<div class="nav-left">
<h3 class="brand"><a href="#">Brand</a></h3>
<a class="brand" href="#">Brand</a>
</div>
<div class="nav-right">
<div class="tabs">
<a href="#!1.html">Link 1</a>
<a href="#!2.html">Link 2</a>
<a href="#!3.html">Link 3</a>
<a href="#!3.html" class="active">Link 3</a>
</div>
</div>
</nav>