mirror of
https://github.com/jenil/chota.git
synced 2023-08-10 21:13:07 +03:00
updates 🛠 🎨 🗺 🏷
* remove iframe border 🛠
* fix for nav with logo & text 🗺
* new color & button style 🎨
* new component: tags 🏷
This commit is contained in:
Jenil Gogari
parent
d50e7a8c2a
commit
c48bf16923
70
dist/chota.css
vendored
70
dist/chota.css
vendored
@ -2,6 +2,7 @@
|
||||
:root {
|
||||
--primary-color: #1a9f60;
|
||||
--lightGrey-color: #d2d6dd;
|
||||
--darkGrey-color: #84868b;
|
||||
--grid-maxWidth: 120rem;
|
||||
--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;
|
||||
@ -129,10 +130,12 @@ abbr[title] {
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
fieldset,
|
||||
iframe {
|
||||
fieldset {
|
||||
border: 1px solid var(--lightGrey-color);
|
||||
}
|
||||
iframe {
|
||||
border: 0;
|
||||
}
|
||||
.container {
|
||||
max-width: var(--grid-maxWidth);
|
||||
margin: 0 auto;
|
||||
@ -239,10 +242,10 @@ legend {
|
||||
font-size: 0.8em;
|
||||
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,
|
||||
textarea,
|
||||
textarea[type=text] {
|
||||
textarea[type="text"] {
|
||||
font-family: inherit;
|
||||
padding: 0.7rem 1rem;
|
||||
border-radius: 4px;
|
||||
@ -252,16 +255,16 @@ textarea[type=text] {
|
||||
display: block;
|
||||
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,
|
||||
textarea:hover,
|
||||
textarea[type=text]:hover {
|
||||
textarea[type="text"]:hover {
|
||||
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,
|
||||
textarea:focus,
|
||||
textarea[type=text]:focus {
|
||||
textarea[type="text"]:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
@ -279,9 +282,9 @@ select {
|
||||
}
|
||||
/* BUTTONS */
|
||||
.button,
|
||||
[type=button],
|
||||
[type=reset],
|
||||
[type=submit],
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"],
|
||||
button {
|
||||
padding: 1rem 2.5rem;
|
||||
color: #333;
|
||||
@ -300,16 +303,16 @@ button {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
.button:hover,
|
||||
[type=button]:hover,
|
||||
[type=reset]:hover,
|
||||
[type=submit]:hover,
|
||||
[type="button"]:hover,
|
||||
[type="reset"]:hover,
|
||||
[type="submit"]:hover,
|
||||
button:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
.button:active,
|
||||
[type=button]:active,
|
||||
[type=reset]:active,
|
||||
[type=submit]:active,
|
||||
[type="button"]:active,
|
||||
[type="reset"]:active,
|
||||
[type="submit"]:active,
|
||||
button:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
@ -321,11 +324,15 @@ button[disabled]:hover {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.button.primary,
|
||||
[type=submit] {
|
||||
.button.secondary,
|
||||
[type="submit"] {
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
background: var(--primary-color);
|
||||
}
|
||||
.button.secondary {
|
||||
background: var(--darkGrey-color);
|
||||
}
|
||||
.button.outline {
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--lightGrey-color);
|
||||
@ -334,6 +341,10 @@ button[disabled]:hover {
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
.button.outline.secondary {
|
||||
border-color: var(--darkGrey-color);
|
||||
color: var(--darkGrey-color);
|
||||
}
|
||||
.button.clear {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
@ -407,6 +418,9 @@ button[disabled]:hover {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.nav .brand img {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
.nav .button {
|
||||
margin: auto 1rem;
|
||||
}
|
||||
@ -449,6 +463,26 @@ button[disabled]:hover {
|
||||
-ms-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 {
|
||||
float: right;
|
||||
}
|
||||
|
||||
2
dist/chota.min.css
vendored
2
dist/chota.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1,6 +1,7 @@
|
||||
:root {
|
||||
--primary-color: #1a9f60;
|
||||
--lightGrey-color: #d2d6dd;
|
||||
--darkGrey-color: #84868b;
|
||||
--grid-maxWidth: 120rem;
|
||||
--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;
|
||||
@ -155,7 +156,10 @@ img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
fieldset,
|
||||
iframe {
|
||||
fieldset {
|
||||
border: 1px solid var(--lightGrey-color);
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 0;
|
||||
}
|
||||
@ -8,10 +8,10 @@ legend {
|
||||
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,
|
||||
textarea,
|
||||
textarea[type=text] {
|
||||
textarea[type="text"] {
|
||||
font-family: inherit;
|
||||
padding: 0.7rem 1rem;
|
||||
border-radius: 4px;
|
||||
@ -22,17 +22,17 @@ textarea[type=text] {
|
||||
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,
|
||||
textarea:hover,
|
||||
textarea[type=text]:hover {
|
||||
textarea[type="text"]:hover {
|
||||
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,
|
||||
textarea:focus,
|
||||
textarea[type=text]:focus {
|
||||
textarea[type="text"]:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
@ -53,9 +53,9 @@ select {
|
||||
|
||||
/* BUTTONS */
|
||||
.button,
|
||||
[type=button],
|
||||
[type=reset],
|
||||
[type=submit],
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"],
|
||||
button {
|
||||
padding: 1rem 2.5rem;
|
||||
color: #333;
|
||||
@ -76,17 +76,17 @@ button {
|
||||
}
|
||||
|
||||
.button:hover,
|
||||
[type=button]:hover,
|
||||
[type=reset]:hover,
|
||||
[type=submit]:hover,
|
||||
[type="button"]:hover,
|
||||
[type="reset"]:hover,
|
||||
[type="submit"]:hover,
|
||||
button:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.button:active,
|
||||
[type=button]:active,
|
||||
[type=reset]:active,
|
||||
[type=submit]:active,
|
||||
[type="button"]:active,
|
||||
[type="reset"]:active,
|
||||
[type="submit"]:active,
|
||||
button:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
@ -100,12 +100,17 @@ button[disabled]:hover {
|
||||
}
|
||||
|
||||
.button.primary,
|
||||
[type=submit] {
|
||||
.button.secondary,
|
||||
[type="submit"] {
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
background: var(--primary-color);
|
||||
}
|
||||
|
||||
.button.secondary {
|
||||
background: var(--darkGrey-color);
|
||||
}
|
||||
|
||||
.button.outline {
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--lightGrey-color);
|
||||
@ -116,6 +121,11 @@ button[disabled]:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.button.outline.secondary {
|
||||
border-color: var(--darkGrey-color);
|
||||
color: var(--darkGrey-color);
|
||||
}
|
||||
|
||||
.button.clear {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
|
||||
@ -64,6 +64,10 @@
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.nav .brand img {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.nav .button {
|
||||
margin: auto 1rem;
|
||||
}
|
||||
|
||||
23
src/_tag.css
Normal file
23
src/_tag.css
Normal 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;
|
||||
}
|
||||
@ -6,5 +6,6 @@
|
||||
@import "_nav.css";
|
||||
@import "_card.css";
|
||||
@import "_tab.css";
|
||||
@import "_tag.css";
|
||||
|
||||
@import "_util.css";
|
||||
|
||||
@ -14,6 +14,9 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Nav</h1>
|
||||
</div>
|
||||
<nav class="nav">
|
||||
<div class="container">
|
||||
<div class="nav-left">
|
||||
@ -30,6 +33,8 @@
|
||||
</div>
|
||||
</nav>
|
||||
<br>
|
||||
<hr>
|
||||
<br>
|
||||
<nav class="nav">
|
||||
<div class="nav-left">
|
||||
<a class="brand" href="#">Logo</a>
|
||||
@ -44,7 +49,10 @@
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container">
|
||||
<h1>Nav</h1>
|
||||
<section>
|
||||
<br>
|
||||
<hr>
|
||||
<br>
|
||||
<nav class="nav">
|
||||
<div class="nav-center">
|
||||
<a href="#!1.html">Link 1</a>
|
||||
@ -53,10 +61,13 @@
|
||||
<a href="#!" class="button primary">Button</a>
|
||||
</div>
|
||||
</nav>
|
||||
<br><hr><br>
|
||||
<br>
|
||||
<hr>
|
||||
<br>
|
||||
<nav class="nav">
|
||||
<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 class="nav-right">
|
||||
<div class="tabs">
|
||||
@ -66,7 +77,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<br><hr><br>
|
||||
<br>
|
||||
<hr>
|
||||
<br>
|
||||
<nav class="nav">
|
||||
<div class="nav-left">
|
||||
<a class="brand" href="#">
|
||||
@ -79,20 +92,27 @@
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<br><hr><br>
|
||||
|
||||
<br>
|
||||
<hr>
|
||||
<br>
|
||||
</section>
|
||||
<section>
|
||||
<h1>Tabs</h1>
|
||||
<div class="tabs">
|
||||
<a class="active" href="#!1.html">Tab 1</a>
|
||||
<a href="#!2.html">Tab 2</a>
|
||||
<a href="#!3.html">Tab 3</a>
|
||||
</div>
|
||||
<br> <hr> <br>
|
||||
<br>
|
||||
<hr>
|
||||
<br>
|
||||
<div class="tabs is-full">
|
||||
<a class="active" href="#!1.html">Tab 1</a>
|
||||
<a href="#!2.html">Tab 2</a>
|
||||
<a href="#!3.html">Tab 3</a>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h1>Card</h1>
|
||||
<div class="row is-center">
|
||||
<div class="col-4">
|
||||
@ -100,7 +120,8 @@
|
||||
<header>
|
||||
<h4>Card title</h4>
|
||||
</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">
|
||||
<a href="#!" class="button primary">Submit</a>
|
||||
<a href="#!" class="button">Cancel</a>
|
||||
@ -109,11 +130,19 @@
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<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>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>
|
||||
<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>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>
|
||||
</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>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
@ -281,6 +310,7 @@
|
||||
<div class="card is-center">.col-12</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
||||
@ -465,8 +465,10 @@
|
||||
<p>
|
||||
<a href="#" class="button">a.button</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 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>
|
||||
</p>
|
||||
</fieldset>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user