mirror of https://github.com/jenil/chota.git
update for dark mode 🌙
This commit is contained in:
Jenil Gogari
parent
df8e6c9fc0
commit
6a5a35f124
|
|
@ -1,3 +1,4 @@
|
|||
node_modules
|
||||
_site
|
||||
*.lock
|
||||
.jekyll-cache
|
||||
|
|
|
|||
|
|
@ -129,6 +129,7 @@ kbd {
|
|||
border-radius: 4px;
|
||||
padding: 0.2em 0.4em;
|
||||
background-color: var(--bg-secondary-color);
|
||||
color: var(--color-error);
|
||||
}
|
||||
pre {
|
||||
background-color: var(--bg-secondary-color);
|
||||
|
|
@ -731,11 +732,11 @@ button:disabled:hover {
|
|||
margin: auto 1rem;
|
||||
}
|
||||
.card {
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 4px;
|
||||
background: var(--bg-color);
|
||||
-webkit-box-shadow: 0 1px 3px var(--color-grey);
|
||||
box-shadow: 0 1px 3px var(--color-grey);
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 4px;
|
||||
background: var(--bg-color);
|
||||
-webkit-box-shadow: 0 1px 3px var(--color-grey);
|
||||
box-shadow: 0 1px 3px var(--color-grey);
|
||||
}
|
||||
.card p:last-child {
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -1,152 +1,303 @@
|
|||
body.dark {
|
||||
--bg-color: #000;
|
||||
--bg-secondary-color: #131316;
|
||||
--font-color: #f5f5f5;
|
||||
--color-grey: #ccc;
|
||||
--color-darkGrey: #777;
|
||||
--bg-color: #000;
|
||||
--bg-secondary-color: #262626;
|
||||
--font-color: #f5f5f5;
|
||||
--color-grey: #bbb;
|
||||
--color-darkGrey: #888;
|
||||
--color-primary: #17c16f;
|
||||
--color-error: #ea4f4f;
|
||||
}
|
||||
|
||||
body>.container {
|
||||
max-width: 720px;
|
||||
body > .container {
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.logo {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.logo svg {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.logo h3 {
|
||||
font-weight: 300;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
body>footer {
|
||||
background-color: #fafafa;
|
||||
padding: 4rem;
|
||||
body > footer {
|
||||
background-color: #fafafa;
|
||||
padding: 4rem;
|
||||
}
|
||||
|
||||
body.dark>footer {
|
||||
background-color: #1a1a1a;
|
||||
body.dark > footer {
|
||||
background-color: #262626;
|
||||
}
|
||||
|
||||
section {
|
||||
margin: 5rem auto;
|
||||
margin: 5rem auto;
|
||||
}
|
||||
|
||||
#features ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
font-size: 1.2em;
|
||||
font-weight: 200;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
font-size: 1.2em;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
figure.highlight {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 3rem 0;
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
#grid .card {
|
||||
padding: 1rem 0rem;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
background-color: rgba(26, 159, 96, 0.2);
|
||||
font-size: 1.2rem;
|
||||
padding: 1rem 0rem;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
background-color: rgba(26, 159, 96, 0.2);
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
body.dark #grid .card {
|
||||
background-color: rgba(26, 159, 96, 0.4);
|
||||
}
|
||||
|
||||
body.dark .card {
|
||||
box-shadow: 0 1px 3px var(--color-darkGrey);
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.buttons > * {
|
||||
margin: .5rem;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
.buttons > .button + .button {
|
||||
margin-left: .5rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.highlight, code { background-color: var(--bg-secondary-color); }
|
||||
.highlight .c { color: #93a1a1 } /* Comment */
|
||||
.highlight .err { color: #586e75 } /* Error */
|
||||
.highlight .g { color: #586e75 } /* Generic */
|
||||
.highlight .k { color: #859900 } /* Keyword */
|
||||
.highlight .l { color: #586e75 } /* Literal */
|
||||
.highlight .n { color: #586e75 } /* Name */
|
||||
.highlight .o { color: #859900 } /* Operator */
|
||||
.highlight .x { color: #cb4b16 } /* Other */
|
||||
.highlight .p { color: #586e75 } /* Punctuation */
|
||||
.highlight .cm { color: #93a1a1 } /* Comment.Multiline */
|
||||
.highlight .cp { color: #859900 } /* Comment.Preproc */
|
||||
.highlight .c1 { color: #93a1a1 } /* Comment.Single */
|
||||
.highlight .cs { color: #859900 } /* Comment.Special */
|
||||
.highlight .gd { color: #2aa198 } /* Generic.Deleted */
|
||||
.highlight .ge { color: #586e75; font-style: italic } /* Generic.Emph */
|
||||
.highlight .gr { color: #dc322f } /* Generic.Error */
|
||||
.highlight .gh { color: #cb4b16 } /* Generic.Heading */
|
||||
.highlight .gi { color: #859900 } /* Generic.Inserted */
|
||||
.highlight .go { color: #586e75 } /* Generic.Output */
|
||||
.highlight .gp { color: #586e75 } /* Generic.Prompt */
|
||||
.highlight .gs { color: #586e75; font-weight: bold } /* Generic.Strong */
|
||||
.highlight .gu { color: #cb4b16 } /* Generic.Subheading */
|
||||
.highlight .gt { color: #586e75 } /* Generic.Traceback */
|
||||
.highlight .kc { color: #cb4b16 } /* Keyword.Constant */
|
||||
.highlight .kd { color: #22b3eb } /* Keyword.Declaration */
|
||||
.highlight .kn { color: #859900 } /* Keyword.Namespace */
|
||||
.highlight .kp { color: #859900 } /* Keyword.Pseudo */
|
||||
.highlight .kr { color: #22b3eb } /* Keyword.Reserved */
|
||||
.highlight .kt { color: #dc322f } /* Keyword.Type */
|
||||
.highlight .ld { color: #586e75 } /* Literal.Date */
|
||||
.highlight .m { color: #2aa198 } /* Literal.Number */
|
||||
.highlight .s { color: #2aa198 } /* Literal.String */
|
||||
.highlight .na { color: #586e75 } /* Name.Attribute */
|
||||
.highlight .nb { color: #B58900 } /* Name.Builtin */
|
||||
.highlight .nc { color: #22b3eb } /* Name.Class */
|
||||
.highlight .no { color: #cb4b16 } /* Name.Constant */
|
||||
.highlight .nd { color: #22b3eb } /* Name.Decorator */
|
||||
.highlight .ni { color: #cb4b16 } /* Name.Entity */
|
||||
.highlight .ne { color: #cb4b16 } /* Name.Exception */
|
||||
.highlight .nf { color: #22b3eb } /* Name.Function */
|
||||
.highlight .nl { color: #586e75 } /* Name.Label */
|
||||
.highlight .nn { color: #586e75 } /* Name.Namespace */
|
||||
.highlight .nx { color: #586e75 } /* Name.Other */
|
||||
.highlight .py { color: #586e75 } /* Name.Property */
|
||||
.highlight .nt { color: #22b3eb } /* Name.Tag */
|
||||
.highlight .nv { color: #22b3eb } /* Name.Variable */
|
||||
.highlight .ow { color: #859900 } /* Operator.Word */
|
||||
.highlight .w { color: #586e75 } /* Text.Whitespace */
|
||||
.highlight .mf { color: #2aa198 } /* Literal.Number.Float */
|
||||
.highlight .mh { color: #2aa198 } /* Literal.Number.Hex */
|
||||
.highlight .mi { color: #2aa198 } /* Literal.Number.Integer */
|
||||
.highlight .mo { color: #2aa198 } /* Literal.Number.Oct */
|
||||
.highlight .sb { color: #93a1a1 } /* Literal.String.Backtick */
|
||||
.highlight .sc { color: #2aa198 } /* Literal.String.Char */
|
||||
.highlight .sd { color: #586e75 } /* Literal.String.Doc */
|
||||
.highlight .s2 { color: #2aa198 } /* Literal.String.Double */
|
||||
.highlight .se { color: #cb4b16 } /* Literal.String.Escape */
|
||||
.highlight .sh { color: #586e75 } /* Literal.String.Heredoc */
|
||||
.highlight .si { color: #2aa198 } /* Literal.String.Interpol */
|
||||
.highlight .sx { color: #2aa198 } /* Literal.String.Other */
|
||||
.highlight .sr { color: #dc322f } /* Literal.String.Regex */
|
||||
.highlight .s1 { color: #2aa198 } /* Literal.String.Single */
|
||||
.highlight .ss { color: #2aa198 } /* Literal.String.Symbol */
|
||||
.highlight .bp { color: #22b3eb } /* Name.Builtin.Pseudo */
|
||||
.highlight .vc { color: #22b3eb } /* Name.Variable.Class */
|
||||
.highlight .vg { color: #22b3eb } /* Name.Variable.Global */
|
||||
.highlight .vi { color: #22b3eb } /* Name.Variable.Instance */
|
||||
.highlight .il { color: #2aa198 } /* Literal.Number.Integer.Long */
|
||||
.highlight,
|
||||
code {
|
||||
background-color: var(--bg-secondary-color);
|
||||
}
|
||||
.highlight .c {
|
||||
color: #93a1a1;
|
||||
} /* Comment */
|
||||
.highlight .err {
|
||||
color: #586e75;
|
||||
} /* Error */
|
||||
.highlight .g {
|
||||
color: #586e75;
|
||||
} /* Generic */
|
||||
.highlight .k {
|
||||
color: #859900;
|
||||
} /* Keyword */
|
||||
.highlight .l {
|
||||
color: #586e75;
|
||||
} /* Literal */
|
||||
.highlight .n {
|
||||
color: #586e75;
|
||||
} /* Name */
|
||||
.highlight .o {
|
||||
color: #859900;
|
||||
} /* Operator */
|
||||
.highlight .x {
|
||||
color: #cb4b16;
|
||||
} /* Other */
|
||||
.highlight .p {
|
||||
color: #586e75;
|
||||
} /* Punctuation */
|
||||
.highlight .cm {
|
||||
color: #93a1a1;
|
||||
} /* Comment.Multiline */
|
||||
.highlight .cp {
|
||||
color: #859900;
|
||||
} /* Comment.Preproc */
|
||||
.highlight .c1 {
|
||||
color: #93a1a1;
|
||||
} /* Comment.Single */
|
||||
.highlight .cs {
|
||||
color: #859900;
|
||||
} /* Comment.Special */
|
||||
.highlight .gd {
|
||||
color: #2aa198;
|
||||
} /* Generic.Deleted */
|
||||
.highlight .ge {
|
||||
color: #586e75;
|
||||
font-style: italic;
|
||||
} /* Generic.Emph */
|
||||
.highlight .gr {
|
||||
color: #dc322f;
|
||||
} /* Generic.Error */
|
||||
.highlight .gh {
|
||||
color: #cb4b16;
|
||||
} /* Generic.Heading */
|
||||
.highlight .gi {
|
||||
color: #859900;
|
||||
} /* Generic.Inserted */
|
||||
.highlight .go {
|
||||
color: #586e75;
|
||||
} /* Generic.Output */
|
||||
.highlight .gp {
|
||||
color: #586e75;
|
||||
} /* Generic.Prompt */
|
||||
.highlight .gs {
|
||||
color: #586e75;
|
||||
font-weight: bold;
|
||||
} /* Generic.Strong */
|
||||
.highlight .gu {
|
||||
color: #cb4b16;
|
||||
} /* Generic.Subheading */
|
||||
.highlight .gt {
|
||||
color: #586e75;
|
||||
} /* Generic.Traceback */
|
||||
.highlight .kc {
|
||||
color: #cb4b16;
|
||||
} /* Keyword.Constant */
|
||||
.highlight .kd {
|
||||
color: #22b3eb;
|
||||
} /* Keyword.Declaration */
|
||||
.highlight .kn {
|
||||
color: #859900;
|
||||
} /* Keyword.Namespace */
|
||||
.highlight .kp {
|
||||
color: #859900;
|
||||
} /* Keyword.Pseudo */
|
||||
.highlight .kr {
|
||||
color: #22b3eb;
|
||||
} /* Keyword.Reserved */
|
||||
.highlight .kt {
|
||||
color: #dc322f;
|
||||
} /* Keyword.Type */
|
||||
.highlight .ld {
|
||||
color: #586e75;
|
||||
} /* Literal.Date */
|
||||
.highlight .m {
|
||||
color: #2aa198;
|
||||
} /* Literal.Number */
|
||||
.highlight .s {
|
||||
color: #2aa198;
|
||||
} /* Literal.String */
|
||||
.highlight .na {
|
||||
color: #586e75;
|
||||
} /* Name.Attribute */
|
||||
.highlight .nb {
|
||||
color: #b58900;
|
||||
} /* Name.Builtin */
|
||||
.highlight .nc {
|
||||
color: #22b3eb;
|
||||
} /* Name.Class */
|
||||
.highlight .no {
|
||||
color: #cb4b16;
|
||||
} /* Name.Constant */
|
||||
.highlight .nd {
|
||||
color: #22b3eb;
|
||||
} /* Name.Decorator */
|
||||
.highlight .ni {
|
||||
color: #cb4b16;
|
||||
} /* Name.Entity */
|
||||
.highlight .ne {
|
||||
color: #cb4b16;
|
||||
} /* Name.Exception */
|
||||
.highlight .nf {
|
||||
color: #22b3eb;
|
||||
} /* Name.Function */
|
||||
.highlight .nl {
|
||||
color: #586e75;
|
||||
} /* Name.Label */
|
||||
.highlight .nn {
|
||||
color: #586e75;
|
||||
} /* Name.Namespace */
|
||||
.highlight .nx {
|
||||
color: #586e75;
|
||||
} /* Name.Other */
|
||||
.highlight .py {
|
||||
color: #586e75;
|
||||
} /* Name.Property */
|
||||
.highlight .nt {
|
||||
color: #22b3eb;
|
||||
} /* Name.Tag */
|
||||
.highlight .nv {
|
||||
color: #22b3eb;
|
||||
} /* Name.Variable */
|
||||
.highlight .ow {
|
||||
color: #859900;
|
||||
} /* Operator.Word */
|
||||
.highlight .w {
|
||||
color: #586e75;
|
||||
} /* Text.Whitespace */
|
||||
.highlight .mf {
|
||||
color: #2aa198;
|
||||
} /* Literal.Number.Float */
|
||||
.highlight .mh {
|
||||
color: #2aa198;
|
||||
} /* Literal.Number.Hex */
|
||||
.highlight .mi {
|
||||
color: #2aa198;
|
||||
} /* Literal.Number.Integer */
|
||||
.highlight .mo {
|
||||
color: #2aa198;
|
||||
} /* Literal.Number.Oct */
|
||||
.highlight .sb {
|
||||
color: #93a1a1;
|
||||
} /* Literal.String.Backtick */
|
||||
.highlight .sc {
|
||||
color: #2aa198;
|
||||
} /* Literal.String.Char */
|
||||
.highlight .sd {
|
||||
color: #586e75;
|
||||
} /* Literal.String.Doc */
|
||||
.highlight .s2 {
|
||||
color: #2aa198;
|
||||
} /* Literal.String.Double */
|
||||
.highlight .se {
|
||||
color: #cb4b16;
|
||||
} /* Literal.String.Escape */
|
||||
.highlight .sh {
|
||||
color: #586e75;
|
||||
} /* Literal.String.Heredoc */
|
||||
.highlight .si {
|
||||
color: #2aa198;
|
||||
} /* Literal.String.Interpol */
|
||||
.highlight .sx {
|
||||
color: #2aa198;
|
||||
} /* Literal.String.Other */
|
||||
.highlight .sr {
|
||||
color: #dc322f;
|
||||
} /* Literal.String.Regex */
|
||||
.highlight .s1 {
|
||||
color: #2aa198;
|
||||
} /* Literal.String.Single */
|
||||
.highlight .ss {
|
||||
color: #2aa198;
|
||||
} /* Literal.String.Symbol */
|
||||
.highlight .bp {
|
||||
color: #22b3eb;
|
||||
} /* Name.Builtin.Pseudo */
|
||||
.highlight .vc {
|
||||
color: #22b3eb;
|
||||
} /* Name.Variable.Class */
|
||||
.highlight .vg {
|
||||
color: #22b3eb;
|
||||
} /* Name.Variable.Global */
|
||||
.highlight .vi {
|
||||
color: #22b3eb;
|
||||
} /* Name.Variable.Instance */
|
||||
.highlight .il {
|
||||
color: #2aa198;
|
||||
} /* Literal.Number.Integer.Long */
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
||||
<title>chota - A micro CSS framework</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="https://unpkg.com/chota">
|
||||
<!-- <link rel="stylesheet" href="https://unpkg.com/chota"> -->
|
||||
<!-- for dev -->
|
||||
<!-- <link rel="stylesheet" href="./dist/chota.css"> -->
|
||||
<link rel="stylesheet" href="http://localhost:5000/dist/chota.css">
|
||||
<link rel="stylesheet" href="./doc-styles.css">
|
||||
<link rel="icon" type="image/png" href="favicon.png" />
|
||||
</head>
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
<a href="#start">start</a>
|
||||
<a href="#docs">docs</a>
|
||||
<a href="https://github.com/jenil/chota">GitHub</a>
|
||||
<a href="javascript:void(0)" onclick="switchMode(this)">☀️</a>
|
||||
<a href="javascript:void(0)" id="theme-switch" onclick="switchMode(this)">☀️</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
|
@ -113,7 +113,7 @@
|
|||
/* Other styles..... */
|
||||
{% endhighlight %}
|
||||
<br>
|
||||
<p>Addtionally, you can add dark mode to you site, to support devices that prefer dark mode.</p>
|
||||
<p>Addtionally, you can add dark mode to your site, to support devices that prefer dark mode.</p>
|
||||
{% highlight html %}
|
||||
<style>
|
||||
body.dark {
|
||||
|
|
@ -176,7 +176,22 @@
|
|||
<p>Want icons for your project too? Checkout <a href="https://icongr.am" target="_blank">Icongr.am 🚀</a></p>
|
||||
<h5>Made by <a href="https://jgog.in" target="_blank">Jenil Gogari</a></h5>
|
||||
</footer>
|
||||
<script src="./main.js"></script>
|
||||
<script>
|
||||
if (
|
||||
window.matchMedia &&
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
) {
|
||||
document.body.classList.add("dark");
|
||||
document.querySelector('#theme-switch').innerHTML = "🌙"
|
||||
}
|
||||
|
||||
function switchMode(el) {
|
||||
const bodyClass = document.body.classList;
|
||||
bodyClass.contains("dark")
|
||||
? ((el.innerHTML = "☀️"), bodyClass.remove("dark"))
|
||||
: ((el.innerHTML = "🌙"), bodyClass.add("dark"));
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
|
|
|
|||
|
|
@ -150,6 +150,7 @@ kbd {
|
|||
border-radius: 4px;
|
||||
padding: 0.2em 0.4em;
|
||||
background-color: var(--bg-secondary-color);
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
pre {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
.card {
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 4px;
|
||||
background: var(--bg-color);
|
||||
box-shadow: 0 1px 3px var(--color-grey);
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 4px;
|
||||
background: var(--bg-color);
|
||||
box-shadow: 0 1px 3px var(--color-grey);
|
||||
}
|
||||
|
||||
.card p:last-child {
|
||||
|
|
|
|||
|
|
@ -1,432 +1,452 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Components</title>
|
||||
<link rel="stylesheet" href="../dist/chota.css" />
|
||||
<style>
|
||||
.nav {
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Components</title>
|
||||
<link rel="stylesheet" href="../dist/chota.css">
|
||||
<style>
|
||||
.nav {
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
body.dark {
|
||||
--bg-color: #000;
|
||||
--bg-secondary-color: #131316;
|
||||
--font-color: #f5f5f5;
|
||||
--color-grey: #ccc;
|
||||
--color-darkGrey: #777;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
body.dark {
|
||||
--bg-color: #000;
|
||||
--bg-secondary-color: #131316;
|
||||
--font-color: #f5f5f5;
|
||||
--color-grey: #ccc;
|
||||
--color-darkGrey: #777;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1 class="pull-right" style="margin: 0;">
|
||||
<a href="javascript:void(0)" onclick="switchMode(this)">☀️</a>
|
||||
</h1>
|
||||
<h1>Nav</h1>
|
||||
</div>
|
||||
<div class="clearfix" ></div>
|
||||
<nav class="nav">
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1 class="pull-right" style="margin: 0;">
|
||||
<a href="javascript:void(0)" onclick="switchMode(this)">☀️</a>
|
||||
</h1>
|
||||
<h1>Nav</h1>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
<nav class="nav">
|
||||
<div class="container">
|
||||
<div class="nav-left">
|
||||
<a class="brand" href="#">Logo</a>
|
||||
</div>
|
||||
<div class="nav-center">
|
||||
<a class="button outline" href="#">Centered</a>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<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="#">Logo</a>
|
||||
</div>
|
||||
<div class="nav-center">
|
||||
<a class="button outline" href="#">Centered</a>
|
||||
<a href="#">Centered</a>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<a href="#!1.html">Link 1</a>
|
||||
<a href="#!2.html">Link 2</a>
|
||||
<a href="#!3.html" class="active">Link 3</a>
|
||||
<a href="#!3.html">Link 3</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<br>
|
||||
<hr>
|
||||
<br>
|
||||
<nav class="nav">
|
||||
<div class="nav-left">
|
||||
<a class="brand" href="#">Logo</a>
|
||||
</div>
|
||||
<div class="nav-center">
|
||||
<a href="#">Centered</a>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container">
|
||||
<section>
|
||||
<br>
|
||||
<hr>
|
||||
<br>
|
||||
<nav class="nav">
|
||||
<div class="nav-center">
|
||||
<a href="#!1.html">Link 1</a>
|
||||
<a href="#!2.html">Link 2</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">
|
||||
</nav>
|
||||
<div class="container">
|
||||
<section>
|
||||
<br />
|
||||
<hr />
|
||||
<br />
|
||||
<nav class="nav">
|
||||
<div class="nav-center">
|
||||
<a href="#!1.html">Link 1</a>
|
||||
<a href="#!2.html">Link 2</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>
|
||||
</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>
|
||||
</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">
|
||||
<div class="card is-center">.col</div>
|
||||
</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 class="row">
|
||||
<div class="col">
|
||||
<div class="card is-center">.col</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card is-center">.col</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card is-center">.col</div>
|
||||
</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 class="row">
|
||||
<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 class="col-1">
|
||||
<div class="card is-center">.col-1</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>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="card is-center">.col</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>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="card is-center">.col</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="col">
|
||||
<div class="card is-center">.col</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="col">
|
||||
<div class="card is-center">.col</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>
|
||||
<div class="row">
|
||||
<div class="col-1">
|
||||
<div class="card is-center">.col-1</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="col-1">
|
||||
<div class="card is-center">.col-1</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="col-1">
|
||||
<div class="card is-center">.col-1</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="col-1">
|
||||
<div class="card is-center">.col-1</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="col-1">
|
||||
<div class="card is-center">.col-1</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="col-1">
|
||||
<div class="card is-center">.col-1</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="col-1">
|
||||
<div class="card is-center">.col-1</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card is-center">.col-12</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
<div class="card is-center">.col-1</div>
|
||||
<h4>Responsive grids:</h4>
|
||||
<div class="row">
|
||||
<div class="col-12 col-6-md col-4-lg">
|
||||
<div class="card is-center">.col-12.col-6-md.col-4-lg</div>
|
||||
</div>
|
||||
<div class="col-6 col-3-md col-4-lg">
|
||||
<div class="card is-center">.col-6.col-3-md.col-4-lg</div>
|
||||
</div>
|
||||
<div class="col-6 col-3-md col-4-lg">
|
||||
<div class="card is-center">.col-6.col-3-md.col-4-lg</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
<div class="card is-center">.col-1</div>
|
||||
<div class="row">
|
||||
<div class="col col-6-lg">
|
||||
<div class="card is-center">.col.col-6-lg</div>
|
||||
</div>
|
||||
<div class="col col-3-lg">
|
||||
<div class="card is-center">.col.col-3-lg</div>
|
||||
</div>
|
||||
<div class="col col-3-lg">
|
||||
<div class="card is-center">.col.col-3-lg</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
<div class="card is-center">.col-1</div>
|
||||
<div class="row">
|
||||
<div class="col hide-sm">
|
||||
<div class="card is-center">.hide-sm</div>
|
||||
</div>
|
||||
<div class="col hide-md">
|
||||
<div class="card is-center">.hide-md</div>
|
||||
</div>
|
||||
<div class="col hide-lg">
|
||||
<div class="card is-center">.hide-lg</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
<div class="card is-center">.col-1</div>
|
||||
</section>
|
||||
<section>
|
||||
<h1>Helpers</h1>
|
||||
<h4>Text color</h4>
|
||||
<p class="text-primary">Primary</p>
|
||||
<p class="text-light">Light</p>
|
||||
<p class="text-grey">Grey</p>
|
||||
<p class="text-dark">Dark</p>
|
||||
<p class="text-error">Error</p>
|
||||
<p class="text-success">Success</p>
|
||||
<h4>Background color</h4>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="card bg-primary">.bg-primary</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card bg-light">.bg-light</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card bg-grey">.bg-grey</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card bg-dark">.bg-dark</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card bg-success">.bg-success</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card bg-error">.bg-error</div>
|
||||
</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>
|
||||
<h4>Responsive grids:</h4>
|
||||
<div class="row">
|
||||
<div class="col-12 col-6-md col-4-lg">
|
||||
<div class="card is-center">.col-12.col-6-md.col-4-lg</div>
|
||||
</div>
|
||||
<div class="col-6 col-3-md col-4-lg">
|
||||
<div class="card is-center">.col-6.col-3-md.col-4-lg</div>
|
||||
</div>
|
||||
<div class="col-6 col-3-md col-4-lg">
|
||||
<div class="card is-center">.col-6.col-3-md.col-4-lg</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col-6-lg">
|
||||
<div class="card is-center">.col.col-6-lg</div>
|
||||
</div>
|
||||
<div class="col col-3-lg">
|
||||
<div class="card is-center">.col.col-3-lg</div>
|
||||
</div>
|
||||
<div class="col col-3-lg">
|
||||
<div class="card is-center">.col.col-3-lg</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col hide-sm">
|
||||
<div class="card is-center">.hide-sm</div>
|
||||
</div>
|
||||
<div class="col hide-md">
|
||||
<div class="card is-center">.hide-md</div>
|
||||
</div>
|
||||
<div class="col hide-lg">
|
||||
<div class="card is-center">.hide-lg</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h1>Helpers</h1>
|
||||
<h4>Text color</h4>
|
||||
<p class="text-primary">Primary</p>
|
||||
<p class="text-light">Light</p>
|
||||
<p class="text-grey">Grey</p>
|
||||
<p class="text-dark">Dark</p>
|
||||
<p class="text-error">Error</p>
|
||||
<p class="text-success">Success</p>
|
||||
<h4>Background color</h4>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="card bg-primary">.bg-primary</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card bg-light">.bg-light</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card bg-grey">.bg-grey</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card bg-dark">.bg-dark</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card bg-success">.bg-success</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card bg-error">.bg-error</div>
|
||||
</div>
|
||||
</div>
|
||||
<h4>Responsive Helpers</h4>
|
||||
<div class="hide-xs">.hide-xs</div>
|
||||
<div class="hide-sm">.hide-sm</div>
|
||||
<div class="hide-md">.hide-md</div>
|
||||
<div class="hide-lg">.hide-lg</div>
|
||||
</section>
|
||||
<section>
|
||||
<h1>Icons</h1>
|
||||
<button type="button" class="button primary icon">New file
|
||||
<img src="https://icongr.am/feather/file.svg?size=16&color=ffffff" alt="icon">
|
||||
</button>
|
||||
<button type="button" class="button icon">New file
|
||||
<img src="https://icongr.am/feather/file.svg?size=12" alt="icon">
|
||||
</button>
|
||||
<button type="button" class="button dark icon">New file
|
||||
<img src="https://icongr.am/feather/file.svg?size=32&color=ffffff" alt="icon">
|
||||
</button>
|
||||
<button class="button icon-only">
|
||||
<img src="https://icongr.am/feather/search.svg?size=16">
|
||||
</button>
|
||||
<button class="button icon-only">
|
||||
<img src="https://icongr.am/feather/search.svg">
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
<p>
|
||||
<br>
|
||||
</p>
|
||||
<script src="../docs/main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<h4>Responsive Helpers</h4>
|
||||
<div class="hide-xs">.hide-xs</div>
|
||||
<div class="hide-sm">.hide-sm</div>
|
||||
<div class="hide-md">.hide-md</div>
|
||||
<div class="hide-lg">.hide-lg</div>
|
||||
</section>
|
||||
<section>
|
||||
<h1>Icons</h1>
|
||||
<button type="button" class="button primary icon">
|
||||
New file
|
||||
<img
|
||||
src="https://icongr.am/feather/file.svg?size=16&color=ffffff"
|
||||
alt="icon"
|
||||
/>
|
||||
</button>
|
||||
<button type="button" class="button icon">
|
||||
New file
|
||||
<img src="https://icongr.am/feather/file.svg?size=12" alt="icon" />
|
||||
</button>
|
||||
<button type="button" class="button dark icon">
|
||||
New file
|
||||
<img
|
||||
src="https://icongr.am/feather/file.svg?size=32&color=ffffff"
|
||||
alt="icon"
|
||||
/>
|
||||
</button>
|
||||
<button class="button icon-only">
|
||||
<img src="https://icongr.am/feather/search.svg?size=16" />
|
||||
</button>
|
||||
<button class="button icon-only">
|
||||
<img src="https://icongr.am/feather/search.svg" />
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
<p>
|
||||
<br />
|
||||
</p>
|
||||
<script src="../docs/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
1267
test/index.html
1267
test/index.html
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue