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
168
dist/chota.css
vendored
168
dist/chota.css
vendored
@ -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,9 +130,11 @@ abbr[title] {
|
|||||||
img {
|
img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
fieldset,
|
fieldset {
|
||||||
|
border: 1px solid var(--lightGrey-color);
|
||||||
|
}
|
||||||
iframe {
|
iframe {
|
||||||
border: 1px solid var(--lightGrey-color);
|
border: 0;
|
||||||
}
|
}
|
||||||
.container {
|
.container {
|
||||||
max-width: var(--grid-maxWidth);
|
max-width: var(--grid-maxWidth);
|
||||||
@ -232,112 +235,120 @@ iframe {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
fieldset {
|
fieldset {
|
||||||
padding: 0.5rem 2rem;
|
padding: 0.5rem 2rem;
|
||||||
}
|
}
|
||||||
legend {
|
legend {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
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;
|
||||||
border: 1px solid var(--lightGrey-color);
|
border: 1px solid var(--lightGrey-color);
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
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);
|
||||||
}
|
}
|
||||||
select {
|
select {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
background: #fafafa no-repeat 100%;
|
background: #fafafa no-repeat 100%;
|
||||||
background-size: 1ex;
|
background-size: 1ex;
|
||||||
background-origin: content-box;
|
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>");
|
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>");
|
||||||
}
|
}
|
||||||
[type="checkbox"],
|
[type="checkbox"],
|
||||||
[type="radio"] {
|
[type="radio"] {
|
||||||
width: 1.6rem;
|
width: 1.6rem;
|
||||||
height: 1.6rem;
|
height: 1.6rem;
|
||||||
}
|
}
|
||||||
/* 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;
|
||||||
background: #e6e6e6;
|
background: #e6e6e6;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
border: none;
|
border: none;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
transition: opacity 0.2s ease;
|
transition: opacity 0.2s ease;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
.button + .button {
|
.button + .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);
|
||||||
}
|
}
|
||||||
input[disabled],
|
input[disabled],
|
||||||
button[disabled],
|
button[disabled],
|
||||||
input[disabled]:hover,
|
input[disabled]:hover,
|
||||||
button[disabled]:hover {
|
button[disabled]:hover {
|
||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
.button.primary,
|
.button.primary,
|
||||||
[type=submit] {
|
.button.secondary,
|
||||||
color: #fff;
|
[type="submit"] {
|
||||||
background-color: #000;
|
color: #fff;
|
||||||
background: var(--primary-color);
|
background-color: #000;
|
||||||
|
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);
|
||||||
}
|
}
|
||||||
.button.outline.primary {
|
.button.outline.primary {
|
||||||
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;
|
||||||
color: var(--primary-color);
|
color: var(--primary-color);
|
||||||
}
|
}
|
||||||
.nav {
|
.nav {
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
@ -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
2
dist/chota.min.css
vendored
File diff suppressed because one or more lines are too long
@ -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;
|
||||||
|
}
|
||||||
140
src/_form.css
140
src/_form.css
@ -1,123 +1,133 @@
|
|||||||
fieldset {
|
fieldset {
|
||||||
padding: 0.5rem 2rem;
|
padding: 0.5rem 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
legend {
|
legend {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
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;
|
||||||
border: 1px solid var(--lightGrey-color);
|
border: 1px solid var(--lightGrey-color);
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
select {
|
select {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
background: #fafafa no-repeat 100%;
|
background: #fafafa no-repeat 100%;
|
||||||
background-size: 1ex;
|
background-size: 1ex;
|
||||||
background-origin: content-box;
|
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>");
|
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>");
|
||||||
}
|
}
|
||||||
|
|
||||||
[type="checkbox"],
|
[type="checkbox"],
|
||||||
[type="radio"] {
|
[type="radio"] {
|
||||||
width: 1.6rem;
|
width: 1.6rem;
|
||||||
height: 1.6rem;
|
height: 1.6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 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;
|
||||||
background: #e6e6e6;
|
background: #e6e6e6;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
border: none;
|
border: none;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
transition: opacity 0.2s ease;
|
transition: opacity 0.2s ease;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button + .button {
|
.button + .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);
|
||||||
}
|
}
|
||||||
|
|
||||||
input[disabled],
|
input[disabled],
|
||||||
button[disabled],
|
button[disabled],
|
||||||
input[disabled]:hover,
|
input[disabled]:hover,
|
||||||
button[disabled]:hover {
|
button[disabled]:hover {
|
||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button.primary,
|
.button.primary,
|
||||||
[type=submit] {
|
.button.secondary,
|
||||||
color: #fff;
|
[type="submit"] {
|
||||||
background-color: #000;
|
color: #fff;
|
||||||
background: var(--primary-color);
|
background-color: #000;
|
||||||
|
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button.outline.primary {
|
.button.outline.primary {
|
||||||
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;
|
||||||
color: var(--primary-color);
|
color: var(--primary-color);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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
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 "_nav.css";
|
||||||
@import "_card.css";
|
@import "_card.css";
|
||||||
@import "_tab.css";
|
@import "_tab.css";
|
||||||
|
@import "_tag.css";
|
||||||
|
|
||||||
@import "_util.css";
|
@import "_util.css";
|
||||||
|
|||||||
@ -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,244 +49,269 @@
|
|||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1>Nav</h1>
|
<section>
|
||||||
<nav class="nav">
|
<br>
|
||||||
<div class="nav-center">
|
<hr>
|
||||||
<a href="#!1.html">Link 1</a>
|
<br>
|
||||||
<a href="#!2.html">Link 2</a>
|
<nav class="nav">
|
||||||
<a href="#!3.html" class="active">Link 3</a>
|
<div class="nav-center">
|
||||||
<a href="#!" class="button primary">Button</a>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<br><hr><br>
|
|
||||||
<nav class="nav">
|
|
||||||
<div class="nav-left">
|
|
||||||
<a class="brand" href="#">Brand</a>
|
|
||||||
</div>
|
|
||||||
<div class="nav-right">
|
|
||||||
<div class="tabs">
|
|
||||||
<a href="#!1.html">Link 1</a>
|
<a href="#!1.html">Link 1</a>
|
||||||
<a href="#!2.html">Link 2</a>
|
<a href="#!2.html">Link 2</a>
|
||||||
<a href="#!3.html" class="active">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">
|
||||||
|
<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">
|
||||||
|
<a href="#!1.html">Link 1</a>
|
||||||
|
<a href="#!2.html">Link 2</a>
|
||||||
|
<a href="#!3.html" class="active">Link 3</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<br>
|
||||||
|
<hr>
|
||||||
|
<br>
|
||||||
|
<nav class="nav">
|
||||||
|
<div class="nav-left">
|
||||||
|
<a class="brand" href="#">
|
||||||
|
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="">
|
||||||
|
</a>
|
||||||
|
<div class="tabs">
|
||||||
|
<a href="#!1.html">Link 1</a>
|
||||||
|
<a href="#!2.html">Link 2</a>
|
||||||
|
<a href="#!3.html">Link 3</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<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>
|
||||||
|
<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">
|
||||||
|
<div class="card">
|
||||||
|
<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>
|
||||||
|
<footer class="is-right">
|
||||||
|
<a href="#!" class="button primary">Submit</a>
|
||||||
|
<a href="#!" class="button">Cancel</a>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</section>
|
||||||
<br><hr><br>
|
<section>
|
||||||
<nav class="nav">
|
<h1>Tag</h1>
|
||||||
<div class="nav-left">
|
<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>
|
||||||
<a class="brand" href="#">
|
</section>
|
||||||
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="">
|
<section>
|
||||||
</a>
|
<h1>Grid</h1>
|
||||||
<div class="tabs">
|
<div class="row">
|
||||||
<a href="#!1.html">Link 1</a>
|
<div class="col">
|
||||||
<a href="#!2.html">Link 2</a>
|
<div class="card is-center">.col</div>
|
||||||
<a href="#!3.html">Link 3</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
<div class="row">
|
||||||
<br><hr><br>
|
<div class="col">
|
||||||
|
<div class="card is-center">.col</div>
|
||||||
<h1>Tabs</h1>
|
</div>
|
||||||
<div class="tabs">
|
<div class="col">
|
||||||
<a class="active" href="#!1.html">Tab 1</a>
|
<div class="card is-center">.col</div>
|
||||||
<a href="#!2.html">Tab 2</a>
|
</div>
|
||||||
<a href="#!3.html">Tab 3</a>
|
<div class="col">
|
||||||
</div>
|
<div class="card is-center">.col</div>
|
||||||
<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>
|
|
||||||
<h1>Card</h1>
|
|
||||||
<div class="row is-center">
|
|
||||||
<div class="col-4">
|
|
||||||
<div class="card">
|
|
||||||
<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>
|
|
||||||
<footer class="is-right">
|
|
||||||
<a href="#!" class="button primary">Submit</a>
|
|
||||||
<a href="#!" class="button">Cancel</a>
|
|
||||||
</footer>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-6">
|
<div class="row">
|
||||||
<div class="card">
|
<div class="col-1">
|
||||||
<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>
|
<div class="card is-center">.col-1</div>
|
||||||
<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 class="col-1">
|
||||||
|
<div class="card is-center">.col-1</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1">
|
||||||
|
<div class="card is-center">.col-1</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1">
|
||||||
|
<div class="card is-center">.col-1</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1">
|
||||||
|
<div class="card is-center">.col-1</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1">
|
||||||
|
<div class="card is-center">.col-1</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1">
|
||||||
|
<div class="card is-center">.col-1</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1">
|
||||||
|
<div class="card is-center">.col-1</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1">
|
||||||
|
<div class="card is-center">.col-1</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1">
|
||||||
|
<div class="card is-center">.col-1</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1">
|
||||||
|
<div class="card is-center">.col-1</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1">
|
||||||
|
<div class="card is-center">.col-1</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="row">
|
||||||
<h1>Grid</h1>
|
<div class="col-2">
|
||||||
<div class="row">
|
<div class="card is-center">.col-2</div>
|
||||||
<div class="col">
|
</div>
|
||||||
<div class="card is-center">.col</div>
|
<div class="col-2">
|
||||||
|
<div class="card is-center">.col-2</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-2">
|
||||||
|
<div class="card is-center">.col-2</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card is-center">.col</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="row">
|
||||||
<div class="row">
|
<div class="col-3">
|
||||||
<div class="col">
|
<div class="card is-center">.col-3</div>
|
||||||
<div class="card is-center">.col</div>
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<div class="card is-center">.col-3</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<div class="card is-center">.col-3</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<div class="card is-center">.col-3</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="row">
|
||||||
<div class="card is-center">.col</div>
|
<div class="col-4">
|
||||||
|
<div class="card is-center">.col-4</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-4">
|
||||||
|
<div class="card is-center">.col-4</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-4">
|
||||||
|
<div class="card is-center">.col-4</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="row">
|
||||||
<div class="card is-center">.col</div>
|
<div class="col-5">
|
||||||
|
<div class="card is-center">.col-5</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-5">
|
||||||
|
<div class="card is-center">.col-5</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card is-center">.col</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="row">
|
||||||
<div class="row">
|
<div class="col-6">
|
||||||
<div class="col-1">
|
<div class="card is-center">.col-6</div>
|
||||||
<div class="card is-center">.col-1</div>
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="card is-center">.col-6</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-1">
|
<div class="row">
|
||||||
<div class="card is-center">.col-1</div>
|
<div class="col-7">
|
||||||
|
<div class="card is-center">.col-7</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card is-center">.col</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1">
|
||||||
|
<div class="card is-center">.col-1</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-1">
|
<div class="row">
|
||||||
<div class="card is-center">.col-1</div>
|
<div class="col-8">
|
||||||
|
<div class="card is-center">.col-8</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card is-center">.col</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1">
|
||||||
|
<div class="card is-center">.col-1</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-1">
|
<div class="row">
|
||||||
<div class="card is-center">.col-1</div>
|
<div class="col-9">
|
||||||
|
<div class="card is-center">.col-9</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card is-center">.col</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-1">
|
||||||
|
<div class="card is-center">.col-1</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-1">
|
<div class="row">
|
||||||
<div class="card is-center">.col-1</div>
|
<div class="col-10">
|
||||||
|
<div class="card is-center">.col-10</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card is-center">.col</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-1">
|
<div class="row">
|
||||||
<div class="card is-center">.col-1</div>
|
<div class="col-11">
|
||||||
|
<div class="card is-center">.col-11</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div class="card is-center">.col</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-1">
|
<div class="row">
|
||||||
<div class="card is-center">.col-1</div>
|
<div class="col-12">
|
||||||
|
<div class="card is-center">.col-12</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-1">
|
</section>
|
||||||
<div class="card is-center">.col-1</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-1">
|
|
||||||
<div class="card is-center">.col-1</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-1">
|
|
||||||
<div class="card is-center">.col-1</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-1">
|
|
||||||
<div class="card is-center">.col-1</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-1">
|
|
||||||
<div class="card is-center">.col-1</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-2">
|
|
||||||
<div class="card is-center">.col-2</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-2">
|
|
||||||
<div class="card is-center">.col-2</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-2">
|
|
||||||
<div class="card is-center">.col-2</div>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="card is-center">.col</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-3">
|
|
||||||
<div class="card is-center">.col-3</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-3">
|
|
||||||
<div class="card is-center">.col-3</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-3">
|
|
||||||
<div class="card is-center">.col-3</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-3">
|
|
||||||
<div class="card is-center">.col-3</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-4">
|
|
||||||
<div class="card is-center">.col-4</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-4">
|
|
||||||
<div class="card is-center">.col-4</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-4">
|
|
||||||
<div class="card is-center">.col-4</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-5">
|
|
||||||
<div class="card is-center">.col-5</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-5">
|
|
||||||
<div class="card is-center">.col-5</div>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="card is-center">.col</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-6">
|
|
||||||
<div class="card is-center">.col-6</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-6">
|
|
||||||
<div class="card is-center">.col-6</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-7">
|
|
||||||
<div class="card is-center">.col-7</div>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="card is-center">.col</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-1">
|
|
||||||
<div class="card is-center">.col-1</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-8">
|
|
||||||
<div class="card is-center">.col-8</div>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="card is-center">.col</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-1">
|
|
||||||
<div class="card is-center">.col-1</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-9">
|
|
||||||
<div class="card is-center">.col-9</div>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="card is-center">.col</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-1">
|
|
||||||
<div class="card is-center">.col-1</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-10">
|
|
||||||
<div class="card is-center">.col-10</div>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="card is-center">.col</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-11">
|
|
||||||
<div class="card is-center">.col-11</div>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<div class="card is-center">.col</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="card is-center">.col-12</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@ -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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user