mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add main layout
This commit is contained in:
Jeremy Thomas
parent
a6b48378f8
commit
4ede497c96
@ -1,4 +1,41 @@
|
||||
{
|
||||
"navbar_items": [
|
||||
{
|
||||
"id": "templates",
|
||||
"color": "has-text-info",
|
||||
"fa_type": "fas",
|
||||
"fa_icon": "fa-code",
|
||||
"title": "Templates"
|
||||
},
|
||||
{
|
||||
"id": "videos",
|
||||
"color": "has-text-success",
|
||||
"fa_type": "fas",
|
||||
"fa_icon": "fa-play-circle",
|
||||
"title": "Videos"
|
||||
},
|
||||
{
|
||||
"id": "blog",
|
||||
"color": "bd-has-text-rss",
|
||||
"fa_type": "fas",
|
||||
"fa_icon": "fa-rss",
|
||||
"title": "Blog"
|
||||
},
|
||||
{
|
||||
"id": "expo",
|
||||
"color": "bd-has-text-star",
|
||||
"fa_type": "fas",
|
||||
"fa_icon": "fa-star",
|
||||
"title": "Expo"
|
||||
},
|
||||
{
|
||||
"id": "love",
|
||||
"color": "has-text-danger",
|
||||
"fa_type": "fas",
|
||||
"fa_icon": "fa-heart",
|
||||
"title": "Love"
|
||||
}
|
||||
],
|
||||
"more_items": [
|
||||
{
|
||||
"id": "bulma-start",
|
||||
|
||||
16
docs/_includes/elements/improve-page.html
Normal file
16
docs/_includes/elements/improve-page.html
Normal file
@ -0,0 +1,16 @@
|
||||
<section class="section bd-typo">
|
||||
<div class="container">
|
||||
<p class="has-text-centered has-text-grey-light">
|
||||
<a href="{{ site.url }}/made-with-bulma/">
|
||||
<img src="{{ site.url }}/images/made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
|
||||
</a>
|
||||
<br>
|
||||
This page is <strong class="has-text-grey">open source</strong>.
|
||||
Noticed a typo? Or something unclear?
|
||||
<br>
|
||||
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/{{ page.path }}" style="border-bottom: 1px solid currentColor;">
|
||||
Improve this page on GitHub
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
@ -1,4 +1,4 @@
|
||||
<nav id="navbar" class="navbar is-fixed-top {% if include.transparent %}is-transparent{% endif %}">
|
||||
<nav id="navbar" class="navbar">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="{{ site.url }}">
|
||||
<img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
|
||||
@ -23,44 +23,24 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenu{{ include.id }}" class="navbar-menu is-active">
|
||||
<div id="navMenu{{ include.id }}" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item {% if page.route == 'documentation' %}is-active{% endif %} {% if page.layout == 'documentation' %}is-active{% endif %}" href="{{ site.data.meta.documentation }}">
|
||||
<a class="navbar-item bd-navbar-item-documentation {% if page.route == 'documentation' %}is-active{% endif %} {% if page.layout == 'documentation' %}is-active{% endif %}" href="{{ site.data.meta.documentation }}">
|
||||
<span class="icon has-text-primary">
|
||||
<i class="fas fa-book"></i>
|
||||
</span>
|
||||
<span>Documentation</span>
|
||||
</a>
|
||||
<a class="navbar-item {% if page.route == 'templates' %}is-active{% endif %}" href="{{ site.url }}/templates/">
|
||||
<span class="icon has-text-info">
|
||||
<i class="fas fa-code"></i>
|
||||
</span>
|
||||
<span>Templates</span>
|
||||
</a>
|
||||
<a class="navbar-item {% if page.route == 'videos' %}is-active{% endif %}" href="{{ site.url }}/videos/">
|
||||
<span class="icon has-text-success">
|
||||
<i class="fas fa-play-circle"></i>
|
||||
</span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
<a class="navbar-item {% if page.route == 'blog' %}is-active{% endif %}" href="{{ site.url }}/blog/">
|
||||
<span class="icon" style="color: #f26522;">
|
||||
<i class="fas fa-rss"></i>
|
||||
</span>
|
||||
<span>Blog</span>
|
||||
</a>
|
||||
<a class="navbar-item {% if page.route == 'expo' %}is-active{% endif %}" href="{{ site.url }}/expo/">
|
||||
<span class="icon" style="color: #FFD257;">
|
||||
<i class="fas fa-star"></i>
|
||||
</span>
|
||||
<span>Expo</span>
|
||||
</a>
|
||||
<a class="navbar-item {% if page.route == 'love' %}is-active{% endif %}" href="{{ site.url }}/love/">
|
||||
<span class="icon has-text-danger">
|
||||
<i class="fas fa-heart"></i>
|
||||
</span>
|
||||
<span>Love</span>
|
||||
</a>
|
||||
|
||||
{% for item in site.data.global.navbar_items %}
|
||||
<a class="navbar-item bd-navbar-item-{{ item.id }} {% if page.route == item.id %}is-active{% endif %}" href="{{ site.url }}/{{ item.id }}/">
|
||||
<span class="icon {{ item.color }}">
|
||||
<i class="{{ item.fa_type }} {{ item.fa_icon }}"></i>
|
||||
</span>
|
||||
<span>{{ item.title }}</span>
|
||||
</a>
|
||||
{% endfor %}
|
||||
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<div class="navbar-link">
|
||||
More
|
||||
|
||||
@ -287,23 +287,23 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
}
|
||||
|
||||
translateHeader(window.scrollY, false);
|
||||
// translateHeader(window.scrollY, false);
|
||||
|
||||
let ticking = false;
|
||||
let lastY = 0;
|
||||
|
||||
window.addEventListener('scroll', function() {
|
||||
const currentY = window.scrollY;
|
||||
// window.addEventListener('scroll', function() {
|
||||
// const currentY = window.scrollY;
|
||||
|
||||
if (!ticking) {
|
||||
window.requestAnimationFrame(function() {
|
||||
upOrDown(lastY, currentY);
|
||||
ticking = false;
|
||||
lastY = currentY;
|
||||
});
|
||||
}
|
||||
// if (!ticking) {
|
||||
// window.requestAnimationFrame(function() {
|
||||
// upOrDown(lastY, currentY);
|
||||
// ticking = false;
|
||||
// lastY = currentY;
|
||||
// });
|
||||
// }
|
||||
|
||||
ticking = true;
|
||||
});
|
||||
// ticking = true;
|
||||
// });
|
||||
|
||||
});
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="has-navbar-fixed-top {% if page.route %}route-{{page.route}}{% elsif page.layout %}route-{{page.layout}}{% endif %}">
|
||||
<html lang="en" class="{% if page.route %}route-{{page.route}}{% elsif page.layout %}route-{{page.layout}}{% endif %}">
|
||||
{% include head.html %}
|
||||
<body class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}">
|
||||
{% include deprecated.html %}
|
||||
|
||||
@ -3,73 +3,51 @@ layout: default
|
||||
route: documentation
|
||||
---
|
||||
|
||||
{% include navbar.html id="Documentation" has_container=true %}
|
||||
{% include navbar.html id="Documentation" %}
|
||||
|
||||
<section class="hero is-link">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column">
|
||||
<p class="title">
|
||||
Documentation
|
||||
</p>
|
||||
<main class="bd-main">
|
||||
<div class="bd-side-background"></div>
|
||||
<div class="bd-main-container container">
|
||||
<div class="bd-duo">
|
||||
<div class="bd-lead">
|
||||
<div class="bd-breadcrumb">
|
||||
<nav class="breadcrumb" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="{{ site.url }}">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ site.url }}/documentation">Documentation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ site.url }}/documentation/elements">Elements</a>
|
||||
</li>
|
||||
<li class="is-active">
|
||||
<a href="#" aria-current="page">Button</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<header class="bd-header">
|
||||
<h1 class="title">
|
||||
{{ page.title }}
|
||||
</h1>
|
||||
<p class="subtitle">
|
||||
Everything you need to <strong>create a website</strong> with Bulma
|
||||
{{ page.subtitle }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
{% include carbon.html %}
|
||||
</header>
|
||||
|
||||
<div class="bd-content">
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="bd-side">
|
||||
{% include carbon.html %}
|
||||
</aside>
|
||||
</aside>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div class="hero-foot">
|
||||
<div class="container">
|
||||
<nav class="tabs is-boxed">
|
||||
<ul>
|
||||
<li {% if page.doc-tab == 'overview' %}class="is-active"{% endif %}>
|
||||
<a href="{{ site.data.meta.documentation }}">Overview</a>
|
||||
</li>
|
||||
<li {% if page.doc-tab == 'modifiers' %}class="is-active"{% endif %}>
|
||||
<a href="{{ site.url }}/documentation/modifiers/syntax">Modifiers</a>
|
||||
</li>
|
||||
<li {% if page.doc-tab == 'columns' %}class="is-active"{% endif %}>
|
||||
<a href="{{ site.url }}/documentation/columns/basics">Columns</a>
|
||||
</li>
|
||||
<li {% if page.doc-tab == 'layout' %}class="is-active"{% endif %}>
|
||||
<a href="{{ site.url }}/documentation/layout/container/">Layout</a>
|
||||
</li>
|
||||
<li {% if page.doc-tab == 'form' %}class="is-active"{% endif %}>
|
||||
<a href="{{ site.url }}/documentation/form/general">Form</a>
|
||||
</li>
|
||||
<li {% if page.doc-tab == 'elements' %}class="is-active"{% endif %}>
|
||||
<a href="{{ site.url }}/documentation/elements/box/">Elements</a>
|
||||
</li>
|
||||
<li {% if page.doc-tab == 'components' %}class="is-active"{% endif %}>
|
||||
<a href="{{ site.url }}/documentation/components/breadcrumb/">Components</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
{{ content }}
|
||||
|
||||
<section class="section bd-typo">
|
||||
<div class="container">
|
||||
<p class="has-text-centered has-text-grey-light">
|
||||
<a href="{{ site.url }}/made-with-bulma/">
|
||||
<img src="{{ site.url }}/images/made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
|
||||
</a>
|
||||
<br>
|
||||
This page is <strong class="has-text-grey">open source</strong>.
|
||||
Noticed a typo? Or something unclear?
|
||||
<br>
|
||||
<a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/{{ page.path }}" style="border-bottom: 1px solid currentColor;">
|
||||
Improve this page on GitHub
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
{% include elements/improve-page.html %}
|
||||
|
||||
@ -3,6 +3,7 @@ svg
|
||||
max-width: 100%
|
||||
|
||||
$carbon-space: 15px
|
||||
$carbon-width: 300px
|
||||
|
||||
#carboncontainer
|
||||
align-items: center
|
||||
@ -10,8 +11,9 @@ $carbon-space: 15px
|
||||
justify-content: center
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
max-width: 340px
|
||||
max-width: $carbon-width
|
||||
min-height: 120px + ($carbon-space * 2)
|
||||
min-width: 280px
|
||||
|
||||
#carbon
|
||||
flex-grow: 1
|
||||
@ -21,7 +23,7 @@ $carbon-space: 15px
|
||||
&:hover
|
||||
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $primary
|
||||
+tablet
|
||||
width: 340px
|
||||
width: $carbon-width
|
||||
|
||||
#carbonads
|
||||
font-size: 14px
|
||||
|
||||
64
docs/_sass/main.sass
Normal file
64
docs/_sass/main.sass
Normal file
@ -0,0 +1,64 @@
|
||||
.bd-main
|
||||
overflow: hidden
|
||||
position: relative
|
||||
|
||||
// Lead
|
||||
|
||||
.bd-lead
|
||||
// border: 1px solid lightskyblue
|
||||
position: relative
|
||||
|
||||
.bd-breadcrumb
|
||||
margin-bottom: 2.5rem
|
||||
|
||||
.bd-header
|
||||
margin-bottom: 2.5rem
|
||||
.subtitle
|
||||
color: $text-light
|
||||
strong
|
||||
color: currentColor
|
||||
|
||||
// Side
|
||||
|
||||
.bd-side,
|
||||
.bd-side-background
|
||||
background-color: $white-bis
|
||||
// border: 1px solid coral
|
||||
|
||||
.bd-side
|
||||
position: relative
|
||||
|
||||
.bd-side-background
|
||||
bottom: 0
|
||||
left: 50%
|
||||
position: absolute
|
||||
right: 0
|
||||
top: 0
|
||||
|
||||
+touch
|
||||
.bd-lead,
|
||||
.bd-side
|
||||
padding: 1.5rem
|
||||
|
||||
+mobile
|
||||
.bd-side-background
|
||||
display: none
|
||||
|
||||
+tablet
|
||||
.bd-duo
|
||||
display: flex
|
||||
.bd-lead
|
||||
background-color: $white
|
||||
overflow: hidden
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
.bd-side
|
||||
flex: 0 0 300px
|
||||
|
||||
+desktop
|
||||
.bd-main
|
||||
padding: 0 3rem
|
||||
.bd-lead
|
||||
padding: 3rem 3rem 3rem 0
|
||||
.bd-side
|
||||
padding: 3rem 0 3rem 1.5rem
|
||||
@ -1,3 +1,28 @@
|
||||
.bd-has-text-rss
|
||||
color: $rss
|
||||
|
||||
.bd-has-text-star
|
||||
color: $star
|
||||
|
||||
$navbar-items: ("documentation": $primary, "templates": $info, "videos": $success, "blog": $rss, "expo": $star, "love": $red)
|
||||
|
||||
@each $name, $color in $navbar-items
|
||||
.bd-navbar-item-#{$name}
|
||||
.icon
|
||||
color: $color
|
||||
&:hover
|
||||
background-color: $color !important
|
||||
color: #fff !important
|
||||
.icon
|
||||
color: currentColor !important
|
||||
|
||||
.bd-navbar-item-expo
|
||||
&:hover
|
||||
color: #744F09 !important
|
||||
.icon
|
||||
color: #FF7B00 !important
|
||||
|
||||
|
||||
.bd-special-shadow
|
||||
background-image: linear-gradient(rgba(#000, 0.1), rgba(#000, 0))
|
||||
height: 8px
|
||||
@ -28,13 +53,13 @@
|
||||
width: 24px
|
||||
|
||||
.button.bd-is-rss
|
||||
background-color: #f26522
|
||||
background-color: $rss
|
||||
border-color: transparent
|
||||
color: #fff
|
||||
&:hover
|
||||
background-color: darken(#f26522, 5%)
|
||||
background-color: darken($rss, 5%)
|
||||
&:active
|
||||
background-color: darken(#f26522, 10%)
|
||||
background-color: darken($rss, 10%)
|
||||
|
||||
.bd-view-all-versions
|
||||
color: $text-light
|
||||
|
||||
@ -9,8 +9,11 @@ $fortyfour: #5f45bb
|
||||
$amazon: #ffd863
|
||||
$bleeding-green: #ABF47C
|
||||
$bleeding-red: #CA1F26
|
||||
$star: #FFD257
|
||||
$rss: #f26522
|
||||
|
||||
@import "../bulma"
|
||||
@import "./_sass/main"
|
||||
@import "./_sass/highlight"
|
||||
@import "./_sass/override"
|
||||
@import "./_sass/global"
|
||||
|
||||
@ -5084,7 +5084,7 @@ a.tag:hover {
|
||||
color: #3273dc;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0.5em 0.75em;
|
||||
padding: 0 0.75em;
|
||||
}
|
||||
|
||||
.breadcrumb a:hover {
|
||||
@ -5848,6 +5848,7 @@ a.dropdown-item.is-active {
|
||||
box-shadow: 0 2px 0 0 whitesmoke;
|
||||
min-height: 3.25rem;
|
||||
position: relative;
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.navbar.is-white {
|
||||
@ -9491,6 +9492,88 @@ label.panel-block:hover {
|
||||
padding: 3rem 1.5rem 6rem;
|
||||
}
|
||||
|
||||
.bd-main {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bd-lead {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bd-breadcrumb {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.bd-header {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.bd-header .subtitle {
|
||||
color: #7a7a7a;
|
||||
}
|
||||
|
||||
.bd-header .subtitle strong {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.bd-side,
|
||||
.bd-side-background {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.bd-side {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bd-side-background {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1023px) {
|
||||
.bd-lead,
|
||||
.bd-side {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.bd-side-background {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px), print {
|
||||
.bd-duo {
|
||||
display: flex;
|
||||
}
|
||||
.bd-lead {
|
||||
background-color: white;
|
||||
overflow: hidden;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
.bd-side {
|
||||
flex: 0 0 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.bd-main {
|
||||
padding: 0 3rem;
|
||||
}
|
||||
.bd-lead {
|
||||
padding: 3rem 3rem 3rem 0;
|
||||
}
|
||||
.bd-side {
|
||||
padding: 3rem 0 3rem 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background-color: #f5f5f5;
|
||||
color: #586e75;
|
||||
@ -9770,8 +9853,9 @@ svg {
|
||||
justify-content: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 340px;
|
||||
max-width: 300px;
|
||||
min-height: 150px;
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
#carbon {
|
||||
@ -9787,7 +9871,7 @@ svg {
|
||||
|
||||
@media screen and (min-width: 769px), print {
|
||||
#carbon {
|
||||
width: 340px;
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -10282,6 +10366,100 @@ svg {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.bd-has-text-rss {
|
||||
color: #f26522;
|
||||
}
|
||||
|
||||
.bd-has-text-star {
|
||||
color: #FFD257;
|
||||
}
|
||||
|
||||
.bd-navbar-item-documentation .icon {
|
||||
color: #00d1b2;
|
||||
}
|
||||
|
||||
.bd-navbar-item-documentation:hover {
|
||||
background-color: #00d1b2 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.bd-navbar-item-documentation:hover .icon {
|
||||
color: currentColor !important;
|
||||
}
|
||||
|
||||
.bd-navbar-item-templates .icon {
|
||||
color: #209cee;
|
||||
}
|
||||
|
||||
.bd-navbar-item-templates:hover {
|
||||
background-color: #209cee !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.bd-navbar-item-templates:hover .icon {
|
||||
color: currentColor !important;
|
||||
}
|
||||
|
||||
.bd-navbar-item-videos .icon {
|
||||
color: #23d160;
|
||||
}
|
||||
|
||||
.bd-navbar-item-videos:hover {
|
||||
background-color: #23d160 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.bd-navbar-item-videos:hover .icon {
|
||||
color: currentColor !important;
|
||||
}
|
||||
|
||||
.bd-navbar-item-blog .icon {
|
||||
color: #f26522;
|
||||
}
|
||||
|
||||
.bd-navbar-item-blog:hover {
|
||||
background-color: #f26522 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.bd-navbar-item-blog:hover .icon {
|
||||
color: currentColor !important;
|
||||
}
|
||||
|
||||
.bd-navbar-item-expo .icon {
|
||||
color: #FFD257;
|
||||
}
|
||||
|
||||
.bd-navbar-item-expo:hover {
|
||||
background-color: #FFD257 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.bd-navbar-item-expo:hover .icon {
|
||||
color: currentColor !important;
|
||||
}
|
||||
|
||||
.bd-navbar-item-love .icon {
|
||||
color: #ff3860;
|
||||
}
|
||||
|
||||
.bd-navbar-item-love:hover {
|
||||
background-color: #ff3860 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.bd-navbar-item-love:hover .icon {
|
||||
color: currentColor !important;
|
||||
}
|
||||
|
||||
.bd-navbar-item-expo:hover {
|
||||
color: #744F09 !important;
|
||||
}
|
||||
|
||||
.bd-navbar-item-expo:hover .icon {
|
||||
color: #FF7B00 !important;
|
||||
}
|
||||
|
||||
.bd-special-shadow {
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.1), transparent);
|
||||
height: 8px;
|
||||
|
||||
@ -1,8 +1,13 @@
|
||||
---
|
||||
title: Button
|
||||
subtitle: "The classic <strong>button</strong>, in different colors, sizes, and states"
|
||||
layout: documentation
|
||||
doc-tab: elements
|
||||
doc-subtab: button
|
||||
meta:
|
||||
- colors: true
|
||||
- sizes: true
|
||||
- variables: true
|
||||
---
|
||||
|
||||
{% capture button_example %}
|
||||
@ -448,342 +453,322 @@ doc-subtab: button
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav/subnav-elements.html %}
|
||||
<div class="content">
|
||||
<p>
|
||||
The <strong>button</strong> is an essential element of any design. It's meant to look and behave as an <strong>interactive</strong> element of your page.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Buttons</h1>
|
||||
<h2 class="subtitle">
|
||||
The classic <strong>button</strong>, in different colors, sizes, and states
|
||||
</h2>
|
||||
{%
|
||||
include meta.html
|
||||
colors=true
|
||||
sizes=true
|
||||
variables=true
|
||||
%}
|
||||
{% include snippet.html content=button_example %}
|
||||
|
||||
<hr>
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>.button</code> class can be used on:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code><a></code> anchor links
|
||||
</li>
|
||||
<li>
|
||||
<code><button></code> form buttons
|
||||
</li>
|
||||
<li>
|
||||
<code><input type="submit"></code> submit inputs
|
||||
</li>
|
||||
<li>
|
||||
<code><input type="reset"></code> reset inputs
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=button_tags_example %}
|
||||
|
||||
{% include anchor.html name="Colors" %}
|
||||
|
||||
{% include snippet.html content=button_colors_a_example %}
|
||||
|
||||
{% include snippet.html content=button_colors_b_example %}
|
||||
|
||||
{% include anchor.html name="Sizes" %}
|
||||
|
||||
{% include snippet.html content=button_sizes_example %}
|
||||
|
||||
{% include anchor.html name="Styles" %}
|
||||
|
||||
<h4 class="subtitle">Outlined</h4>
|
||||
|
||||
{% include snippet.html content=button_outlined_example %}
|
||||
|
||||
<h4 class="subtitle">Inverted (the text color becomes the background color, and vice-versa)</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="bd-callout is-primary">
|
||||
{{button_inverted_example}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_inverted_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Invert Outlined (the invert color becomes the text and border colors)</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="bd-callout is-primary">
|
||||
{{button_inverted_outlined_example}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_inverted_outlined_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Rounded buttons</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{% include elements/new-tag.html version="0.6.2" %}
|
||||
{{ button_rounded_example }}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{ button_rounded_example }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="States" %}
|
||||
|
||||
<h4 class="subtitle">Normal</h4>
|
||||
|
||||
{% include snippet.html content=button_normal_example %}
|
||||
|
||||
<h4 class="subtitle">Hover</h4>
|
||||
|
||||
{% include snippet.html content=button_hover_example %}
|
||||
|
||||
<h4 class="subtitle">Focus</h4>
|
||||
|
||||
{% include snippet.html content=button_focus_example %}
|
||||
|
||||
<h4 class="subtitle">Active</h4>
|
||||
|
||||
{% include snippet.html content=button_active_example %}
|
||||
|
||||
<h4 class="subtitle">Loading</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="block">
|
||||
{{button_loading_example}}
|
||||
</div>
|
||||
<div class="message is-info">
|
||||
<div class="message-body">
|
||||
<p>
|
||||
Since the loading spinner is implemented using the <code>:after</code> pseudo-element, it is not supported by the <code><input type="submit"></code> element.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_loading_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 id="static-button" class="subtitle">
|
||||
Static
|
||||
</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
The <strong>button</strong> is an essential element of any design. It's meant to look and behave as an <strong>interactive</strong> element of your page.
|
||||
You can create a <strong>non-interactive button</strong> by using the <code>is-static</code> modifier. This is useful to align a text label with an input, for example when using <a href="{{site.url}}/documentation/form/general#form-addons">form addons</a>.
|
||||
</p>
|
||||
</div>
|
||||
{{button_static_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_static_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=button_example %}
|
||||
<h4 class="subtitle">Disabled</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="block">
|
||||
{{button_disabled_example}}
|
||||
</div>
|
||||
<div class="message is-danger">
|
||||
<div class="message-body">
|
||||
<p>The <code>is-disabled</code> CSS class has been deprecated in favor of the <code>disabled</code> HTML attribute. <a href="https://github.com/jgthms/bulma/issues/276">Learn more</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_disabled_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">With Font Awesome icons</h4>
|
||||
|
||||
{% include snippet.html content=button_fa_example clipped=true %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>.button</code> class can be used on:
|
||||
If the button only contains an icon, Bulma will make sure the button remains <strong>square</strong>, no matter the size of the button <em>or</em> of the icon.
|
||||
</p>
|
||||
</div>
|
||||
{{button_only_icon_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_only_icon_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Button group" %}
|
||||
|
||||
<div class="content">
|
||||
<p>If you want to <strong>group</strong> buttons together on a <strong>single line</strong>, use the <code>is-grouped</code> modifier on the <code>field</code> container:</p>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=button_group_example %}
|
||||
|
||||
{% include anchor.html name="Button addons" %}
|
||||
|
||||
<div class="content">
|
||||
<p>If you want to use buttons as <strong>addons</strong>, use the <code>has-addons</code> modifier on the <code>field</code> container:</p>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=button_addons_example %}
|
||||
|
||||
{% include anchor.html name="Button group with addons" %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can group together addons as well:</p>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=button_group_addons_example %}
|
||||
|
||||
{% include anchor.html name="List of buttons" %}
|
||||
|
||||
{% include elements/new-tag.html version="0.6.1" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can now create a <strong>list of buttons</strong> with the <code>.buttons</code> container.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ buttons }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{ buttons }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
If the list is <strong>very long</strong>, it will automatically wrap on <strong>multiple lines</strong>, while keeping all buttons <strong>evenly spaced</strong>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ buttons_multiple }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{ buttons_multiple }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can <strong>attach buttons together</strong> with the <code>.has-addons</code> modifier.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ buttons_addons }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{ buttons_addons }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
Use the <code>is-centered</code> or the <code>is-right</code> modifiers to alter the <strong>alignment</strong>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ buttons_addons_centered }}
|
||||
{{ buttons_addons_right }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{ buttons_addons_centered }}{{ buttons_addons_right }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can use any <strong>modifier</strong> class on each button to differentiate them. Make sure to add the <code>is-selected</code> modifier as well to make sure the selected button is <em>above</em> its siblings.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ buttons_addons_selected }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{ buttons_addons_selected }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message is-info">
|
||||
<div class="message-header">
|
||||
<p>Difference between <a href="{{ site.url }}/documentation/form/general/#form-group">form groups</a> and <strong>list of buttons</strong></p>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
<div class="content">
|
||||
<p>
|
||||
While this list of buttons style can be achieved with either <code>field is-grouped</code> or the new <code>buttons</code> class, there are a few differences:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code><a></code> anchor links
|
||||
<code>buttons</code> has a <strong>simpler markup</strong>
|
||||
</li>
|
||||
<li>
|
||||
<code><button></code> form buttons
|
||||
<code>buttons</code> can only contain <code>button</code> elements
|
||||
</li>
|
||||
<li>
|
||||
<code><input type="submit"></code> submit inputs
|
||||
<code>field is-grouped</code> can contain <em>any</em> type of <code>control</code> inputs
|
||||
</li>
|
||||
<li>
|
||||
<code><input type="reset"></code> reset inputs
|
||||
<code>field is-grouped</code> can be forced to fit all controls on a <strong>single line</strong>
|
||||
</li>
|
||||
<li>
|
||||
with <code>field is-grouped</code> you can <strong>expand</strong> one of the controls
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Basically, if you only want a list of <em>buttons</em>, using <code>buttons</code> is recommended. If you need more control on the styling and the elements, use a <a href="{{ site.url }}/documentation/form/general/#form-group">form group</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=button_tags_example %}
|
||||
|
||||
{% include anchor.html name="Colors" %}
|
||||
|
||||
{% include snippet.html content=button_colors_a_example %}
|
||||
|
||||
{% include snippet.html content=button_colors_b_example %}
|
||||
|
||||
{% include anchor.html name="Sizes" %}
|
||||
|
||||
{% include snippet.html content=button_sizes_example %}
|
||||
|
||||
{% include anchor.html name="Styles" %}
|
||||
|
||||
<h4 class="subtitle">Outlined</h4>
|
||||
|
||||
{% include snippet.html content=button_outlined_example %}
|
||||
|
||||
<h4 class="subtitle">Inverted (the text color becomes the background color, and vice-versa)</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="bd-callout is-primary">
|
||||
{{button_inverted_example}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_inverted_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Invert Outlined (the invert color becomes the text and border colors)</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="bd-callout is-primary">
|
||||
{{button_inverted_outlined_example}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_inverted_outlined_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Rounded buttons</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{% include elements/new-tag.html version="0.6.2" %}
|
||||
{{ button_rounded_example }}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{ button_rounded_example }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="States" %}
|
||||
|
||||
<h4 class="subtitle">Normal</h4>
|
||||
|
||||
{% include snippet.html content=button_normal_example %}
|
||||
|
||||
<h4 class="subtitle">Hover</h4>
|
||||
|
||||
{% include snippet.html content=button_hover_example %}
|
||||
|
||||
<h4 class="subtitle">Focus</h4>
|
||||
|
||||
{% include snippet.html content=button_focus_example %}
|
||||
|
||||
<h4 class="subtitle">Active</h4>
|
||||
|
||||
{% include snippet.html content=button_active_example %}
|
||||
|
||||
<h4 class="subtitle">Loading</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="block">
|
||||
{{button_loading_example}}
|
||||
</div>
|
||||
<div class="message is-info">
|
||||
<div class="message-body">
|
||||
<p>
|
||||
Since the loading spinner is implemented using the <code>:after</code> pseudo-element, it is not supported by the <code><input type="submit"></code> element.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_loading_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 id="static-button" class="subtitle">
|
||||
Static
|
||||
</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can create a <strong>non-interactive button</strong> by using the <code>is-static</code> modifier. This is useful to align a text label with an input, for example when using <a href="{{site.url}}/documentation/form/general#form-addons">form addons</a>.
|
||||
</p>
|
||||
</div>
|
||||
{{button_static_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_static_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Disabled</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="block">
|
||||
{{button_disabled_example}}
|
||||
</div>
|
||||
<div class="message is-danger">
|
||||
<div class="message-body">
|
||||
<p>The <code>is-disabled</code> CSS class has been deprecated in favor of the <code>disabled</code> HTML attribute. <a href="https://github.com/jgthms/bulma/issues/276">Learn more</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_disabled_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">With Font Awesome icons</h4>
|
||||
|
||||
{% include snippet.html content=button_fa_example clipped=true %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
If the button only contains an icon, Bulma will make sure the button remains <strong>square</strong>, no matter the size of the button <em>or</em> of the icon.
|
||||
</p>
|
||||
</div>
|
||||
{{button_only_icon_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_only_icon_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Button group" %}
|
||||
|
||||
<div class="content">
|
||||
<p>If you want to <strong>group</strong> buttons together on a <strong>single line</strong>, use the <code>is-grouped</code> modifier on the <code>field</code> container:</p>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=button_group_example %}
|
||||
|
||||
{% include anchor.html name="Button addons" %}
|
||||
|
||||
<div class="content">
|
||||
<p>If you want to use buttons as <strong>addons</strong>, use the <code>has-addons</code> modifier on the <code>field</code> container:</p>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=button_addons_example %}
|
||||
|
||||
{% include anchor.html name="Button group with addons" %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can group together addons as well:</p>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=button_group_addons_example %}
|
||||
|
||||
{% include anchor.html name="List of buttons" %}
|
||||
|
||||
{% include elements/new-tag.html version="0.6.1" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can now create a <strong>list of buttons</strong> with the <code>.buttons</code> container.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ buttons }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{ buttons }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
If the list is <strong>very long</strong>, it will automatically wrap on <strong>multiple lines</strong>, while keeping all buttons <strong>evenly spaced</strong>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ buttons_multiple }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{ buttons_multiple }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can <strong>attach buttons together</strong> with the <code>.has-addons</code> modifier.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ buttons_addons }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{ buttons_addons }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
Use the <code>is-centered</code> or the <code>is-right</code> modifiers to alter the <strong>alignment</strong>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ buttons_addons_centered }}
|
||||
{{ buttons_addons_right }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{ buttons_addons_centered }}{{ buttons_addons_right }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can use any <strong>modifier</strong> class on each button to differentiate them. Make sure to add the <code>is-selected</code> modifier as well to make sure the selected button is <em>above</em> its siblings.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ buttons_addons_selected }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{ buttons_addons_selected }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message is-info">
|
||||
<div class="message-header">
|
||||
<p>Difference between <a href="{{ site.url }}/documentation/form/general/#form-group">form groups</a> and <strong>list of buttons</strong></p>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
<div class="content">
|
||||
<p>
|
||||
While this list of buttons style can be achieved with either <code>field is-grouped</code> or the new <code>buttons</code> class, there are a few differences:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>buttons</code> has a <strong>simpler markup</strong>
|
||||
</li>
|
||||
<li>
|
||||
<code>buttons</code> can only contain <code>button</code> elements
|
||||
</li>
|
||||
<li>
|
||||
<code>field is-grouped</code> can contain <em>any</em> type of <code>control</code> inputs
|
||||
</li>
|
||||
<li>
|
||||
<code>field is-grouped</code> can be forced to fit all controls on a <strong>single line</strong>
|
||||
</li>
|
||||
<li>
|
||||
with <code>field is-grouped</code> you can <strong>expand</strong> one of the controls
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Basically, if you only want a list of <em>buttons</em>, using <code>buttons</code> is recommended. If you need more control on the styling and the elements, use a <a href="{{ site.url }}/documentation/form/general/#form-group">form group</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include variables.html type='element' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{% include variables.html type='element' %}
|
||||
|
||||
@ -4,7 +4,7 @@ route: index
|
||||
fixed_navbar: true
|
||||
---
|
||||
|
||||
{% include navbar.html id="Index" fixed=true has_container=true boxed=true transparent=true hide_fortyfour=true %}
|
||||
{% include navbar.html id="Index" %}
|
||||
|
||||
{% include index/intro.html %}
|
||||
|
||||
|
||||
@ -287,22 +287,22 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
}
|
||||
}
|
||||
|
||||
translateHeader(window.scrollY, false);
|
||||
// translateHeader(window.scrollY, false);
|
||||
|
||||
var ticking = false;
|
||||
var lastY = 0;
|
||||
|
||||
window.addEventListener('scroll', function () {
|
||||
var currentY = window.scrollY;
|
||||
// window.addEventListener('scroll', function() {
|
||||
// const currentY = window.scrollY;
|
||||
|
||||
if (!ticking) {
|
||||
window.requestAnimationFrame(function () {
|
||||
upOrDown(lastY, currentY);
|
||||
ticking = false;
|
||||
lastY = currentY;
|
||||
});
|
||||
}
|
||||
// if (!ticking) {
|
||||
// window.requestAnimationFrame(function() {
|
||||
// upOrDown(lastY, currentY);
|
||||
// ticking = false;
|
||||
// lastY = currentY;
|
||||
// });
|
||||
// }
|
||||
|
||||
ticking = true;
|
||||
});
|
||||
// ticking = true;
|
||||
// });
|
||||
});
|
||||
@ -2,6 +2,9 @@ $breadcrumb-item-color: $link !default
|
||||
$breadcrumb-item-hover-color: $link-hover !default
|
||||
$breadcrumb-item-active-color: $text-strong !default
|
||||
|
||||
$breadcrumb-item-padding-vertical: 0 !default
|
||||
$breadcrumb-item-padding-horizontal: 0.75em !default
|
||||
|
||||
$breadcrumb-item-separator-color: $text !default
|
||||
|
||||
.breadcrumb
|
||||
@ -18,7 +21,7 @@ $breadcrumb-item-separator-color: $text !default
|
||||
color: $breadcrumb-item-color
|
||||
display: flex
|
||||
justify-content: center
|
||||
padding: 0.5em 0.75em
|
||||
padding: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal
|
||||
&:hover
|
||||
color: $breadcrumb-item-hover-color
|
||||
li
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
$navbar-background-color: $white !default
|
||||
$navbar-height: 3.25rem !default
|
||||
$navbar-z: 30 !default
|
||||
$navbar-fixed-z: 30 !default
|
||||
|
||||
$navbar-item-color: $grey-dark !default
|
||||
@ -45,6 +46,7 @@ $navbar-divider-background-color: $border !default
|
||||
box-shadow: 0 2px 0 0 $background
|
||||
min-height: $navbar-height
|
||||
position: relative
|
||||
z-index: $navbar-z
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
$color-invert: nth($pair, 2)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user