mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-28 12:24:23 +00:00
Add focus
This commit is contained in:
Jeremy Thomas
parent
e8d4efb274
commit
f123eb9562
63
docs/_includes/index/focus.html
Normal file
63
docs/_includes/index/focus.html
Normal file
@ -0,0 +1,63 @@
|
||||
<div class="bd-focus">
|
||||
<nav class="columns">
|
||||
<a class="bd-focus-item column has-text-centered" href="{{ site.url }}/documentation/overview/responsiveness/">
|
||||
<p class="title is-4">
|
||||
<strong>100% Responsive</strong>
|
||||
</p>
|
||||
<p class="subtitle is-6">Designed for <strong>mobile</strong> first</p>
|
||||
<figure class="bd-focus-icon">
|
||||
<span class="icon is-large">
|
||||
<i class="fas fa-lg fa-mobile-alt"></i>
|
||||
</span>
|
||||
<span class="icon is-large">
|
||||
<i class="fas fa-2x fa-tablet-alt"></i>
|
||||
</span>
|
||||
<span class="icon is-large">
|
||||
<i class="fas fa-3x fa-desktop"></i>
|
||||
</span>
|
||||
</figure>
|
||||
</a>
|
||||
|
||||
<a class="bd-focus-item column has-text-centered" href="{{ site.url }}/documentation/overview/modular/">
|
||||
<p class="title is-4">
|
||||
<strong>Modular</strong>
|
||||
</p>
|
||||
<p class="subtitle is-6">
|
||||
Just import what you <strong>need</strong>
|
||||
</p>
|
||||
<figure class="bd-focus-icon">
|
||||
<span class="icon is-large">
|
||||
<i class="fas fa-3x fa-cubes"></i>
|
||||
</span>
|
||||
</figure>
|
||||
</a>
|
||||
|
||||
<a class="bd-focus-item column has-text-centered" href="{{ site.url }}/documentation/columns/basics/">
|
||||
<p class="title is-4">
|
||||
<strong>Modern</strong>
|
||||
</p>
|
||||
<p class="subtitle is-6">
|
||||
Built with <strong>Flexbox</strong>
|
||||
</p>
|
||||
<figure class="bd-focus-icon">
|
||||
<span class="icon is-large">
|
||||
<i class="fab fa-3x fa-css3"></i>
|
||||
</span>
|
||||
</figure>
|
||||
</a>
|
||||
|
||||
<a class="bd-focus-item column has-text-centered" href="{{ site.data.meta.github }}">
|
||||
<p class="title is-4">
|
||||
<strong>Free</strong>
|
||||
</p>
|
||||
<p class="subtitle is-6">
|
||||
Open source on <strong>GitHub</strong>
|
||||
</p>
|
||||
<figure class="bd-focus-icon">
|
||||
<span class="icon is-large">
|
||||
<i class="fab fa-3x fa-github-alt"></i>
|
||||
</span>
|
||||
</figure>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
@ -48,14 +48,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="intro-partners">
|
||||
<div class="intro-sponsor">
|
||||
{% include index/sponsor.html %}
|
||||
</div>
|
||||
<div class="intro-carbon">
|
||||
{% include elements/carbon.html %}
|
||||
</div>
|
||||
</div>
|
||||
{% include index/focus.html %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
<div class="intro-partners">
|
||||
<div class="intro-sponsor">
|
||||
<div class="bd-sponsor">
|
||||
<p class="bd-sponsor-title">Sponsors</p>
|
||||
<div class="bd-sponsor-list">
|
||||
@ -36,3 +38,7 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="intro-carbon">
|
||||
{% include elements/carbon.html %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -76,6 +76,20 @@ breadcrumb:
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="bd-prev-next-bis">
|
||||
{% if page.previous.url %}
|
||||
<a class="bd-prev-next-bis-previous" href="{{ page.previous.url }}">
|
||||
← {{ page.previous.title }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if page.next.url %}
|
||||
<a class="bd-prev-next-bis-next" href="{{ page.next.url }}">
|
||||
{{ page.next.title }} →
|
||||
</a>
|
||||
{% endif %}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<aside class="bd-side">
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
position: relative
|
||||
&::before
|
||||
background: $yellow
|
||||
border-radius: $radius $radius 0 0
|
||||
border-radius: $radius-small $radius-small 0 0
|
||||
bottom: 100%
|
||||
color: $yellow-invert
|
||||
content: "Example"
|
||||
@ -53,6 +53,7 @@
|
||||
content: "Snippet"
|
||||
align-items: stretch
|
||||
display: flex
|
||||
margin-left: -1px
|
||||
|
||||
.bd-snippet-preview
|
||||
padding: 1.5rem
|
||||
|
||||
@ -1,3 +1,32 @@
|
||||
.bd-focus
|
||||
margin: 6rem auto 0
|
||||
max-width: 1080px
|
||||
|
||||
.bd-focus-item
|
||||
.subtitle
|
||||
color: $grey-light
|
||||
strong
|
||||
color: currentColor
|
||||
|
||||
.bd-focus-icon
|
||||
.fa-mobile-alt
|
||||
color: $purple
|
||||
margin-right: -20px
|
||||
.fa-tablet-alt
|
||||
color: $red
|
||||
margin-left: -20px
|
||||
.fa-desktop
|
||||
color: $orange
|
||||
margin-left: -20px
|
||||
position: relative
|
||||
top: 2px
|
||||
.fa-cubes
|
||||
color: $green
|
||||
.fa-css3
|
||||
color: $blue
|
||||
.fa-github-alt
|
||||
color: $github
|
||||
|
||||
.intro-content
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
|
||||
@ -50,7 +50,6 @@
|
||||
padding-bottom: $main-spacing
|
||||
.subtitle
|
||||
color: $text-light
|
||||
max-width: 16em
|
||||
strong
|
||||
color: currentColor
|
||||
#meta
|
||||
@ -155,6 +154,8 @@ $sidebar-width: 14rem
|
||||
.bd-lead
|
||||
margin-left: -3rem
|
||||
padding: 3rem
|
||||
&:last-child
|
||||
margin-right: -3rem
|
||||
.bd-header
|
||||
align-items: center
|
||||
display: flex
|
||||
@ -165,7 +166,7 @@ $sidebar-width: 14rem
|
||||
.bd-header-carbon
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
margin: -15px 0 -15px $main-spacing
|
||||
margin: -15px 0 -15px ($main-spacing * 2)
|
||||
width: $carbon-width
|
||||
.bd-side
|
||||
padding: 3rem 0 3rem 1.5rem
|
||||
|
||||
@ -90,23 +90,23 @@
|
||||
.bd-has-text-star
|
||||
color: $star
|
||||
|
||||
$navbar-items: ("documentation": $primary, "templates": $info, "videos": $success, "blog": $rss, "expo": $star, "love": $red)
|
||||
// $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
|
||||
// @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: #8F6900 !important
|
||||
.icon
|
||||
color: #F4B300 !important
|
||||
// .bd-navbar-item-expo
|
||||
// &:hover
|
||||
// color: #8F6900 !important
|
||||
// .icon
|
||||
// color: #F4B300 !important
|
||||
|
||||
.bd-special-shadow
|
||||
background-image: linear-gradient(rgba(#000, 0.1), rgba(#000, 0))
|
||||
|
||||
@ -9552,7 +9552,6 @@ label.panel-block:hover {
|
||||
|
||||
.bd-header .subtitle {
|
||||
color: #7a7a7a;
|
||||
max-width: 16em;
|
||||
}
|
||||
|
||||
.bd-header .subtitle strong {
|
||||
@ -9687,6 +9686,9 @@ label.panel-block:hover {
|
||||
margin-left: -3rem;
|
||||
padding: 3rem;
|
||||
}
|
||||
.bd-lead:last-child {
|
||||
margin-right: -3rem;
|
||||
}
|
||||
.bd-header {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@ -9699,7 +9701,7 @@ label.panel-block:hover {
|
||||
.bd-header-carbon {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
margin: -15px 0 -15px 3rem;
|
||||
margin: -15px 0 -15px 6rem;
|
||||
width: 300px;
|
||||
}
|
||||
.bd-side {
|
||||
@ -10086,6 +10088,48 @@ svg {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.bd-focus {
|
||||
margin: 6rem auto 0;
|
||||
max-width: 1080px;
|
||||
}
|
||||
|
||||
.bd-focus-item .subtitle {
|
||||
color: #b5b5b5;
|
||||
}
|
||||
|
||||
.bd-focus-item .subtitle strong {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.bd-focus-icon .fa-mobile-alt {
|
||||
color: #b86bff;
|
||||
margin-right: -20px;
|
||||
}
|
||||
|
||||
.bd-focus-icon .fa-tablet-alt {
|
||||
color: #ff3860;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
.bd-focus-icon .fa-desktop {
|
||||
color: #ff470f;
|
||||
margin-left: -20px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.bd-focus-icon .fa-cubes {
|
||||
color: #23d160;
|
||||
}
|
||||
|
||||
.bd-focus-icon .fa-css3 {
|
||||
color: #3273dc;
|
||||
}
|
||||
|
||||
.bd-focus-icon .fa-github-alt {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.intro-content {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
@ -10651,92 +10695,6 @@ svg {
|
||||
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: #8F6900 !important;
|
||||
}
|
||||
|
||||
.bd-navbar-item-expo:hover .icon {
|
||||
color: #F4B300 !important;
|
||||
}
|
||||
|
||||
.bd-special-shadow {
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.1), transparent);
|
||||
height: 8px;
|
||||
@ -10946,7 +10904,7 @@ svg {
|
||||
.bd-structure::before,
|
||||
.bd-snippet::before {
|
||||
background: #ffdd57;
|
||||
border-radius: 4px 4px 0 0;
|
||||
border-radius: 2px 2px 0 0;
|
||||
bottom: 100%;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
content: "Example";
|
||||
@ -11011,6 +10969,7 @@ svg {
|
||||
content: "Snippet";
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.bd-snippet-preview {
|
||||
|
||||
@ -36,13 +36,13 @@ breadcrumb:
|
||||
|
||||
{% capture flex %}
|
||||
<td class="is-narrow">
|
||||
<p class="notification is-success">flex</p>
|
||||
<p class="notification is-primary">flex</p>
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture visible %}
|
||||
<td class="is-narrow">
|
||||
<p class="notification is-success">visible</p>
|
||||
<p class="notification is-primary">visible</p>
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
|
||||
@ -22,6 +22,66 @@ breadcrumb:
|
||||
</a>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_colors %}
|
||||
<a class="button is-primary">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-link">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-info">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-success">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-warning">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-danger">
|
||||
Button
|
||||
</a>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_sizes %}
|
||||
<a class="button is-small">
|
||||
Button
|
||||
</a>
|
||||
<a class="button">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-medium">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-large">
|
||||
Button
|
||||
</a>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_states %}
|
||||
<a class="button is-primary is-outlined">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-loading">
|
||||
Button
|
||||
</a>
|
||||
<a class="button" disabled>
|
||||
Button
|
||||
</a>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_combinations %}
|
||||
<a class="button is-primary is-small" disabled>
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-info is-loading">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-danger is-outlined is-large">
|
||||
Button
|
||||
</a>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p>Let's start with a simple <strong>button</strong> that uses the <code>"button"</code> CSS class:</p>
|
||||
@ -84,26 +144,7 @@ breadcrumb:
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<div class="highlight-full">
|
||||
{% highlight html %}
|
||||
<a class="button is-primary">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-link">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-info">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-success">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-warning">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-danger">
|
||||
Button
|
||||
</a>
|
||||
{% endhighlight %}
|
||||
{% highlight html %}{{ button_colors }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -134,20 +175,7 @@ breadcrumb:
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}
|
||||
<a class="button is-small">
|
||||
Button
|
||||
</a>
|
||||
<a class="button">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-medium">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-large">
|
||||
Button
|
||||
</a>
|
||||
{% endhighlight %}
|
||||
{% highlight html %}{{ button_sizes }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -167,23 +195,35 @@ breadcrumb:
|
||||
<a class="button is-primary is-outlined">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-primary is-loading">Button</a>
|
||||
<a class="button is-loading">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-primary" disabled>Button</a>
|
||||
<a class="button" disabled>Button</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}
|
||||
<a class="button is-primary is-outlined">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-primary is-loading">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-primary" disabled>
|
||||
Button
|
||||
</a>
|
||||
{% endhighlight %}
|
||||
{% highlight html %}{{ button_states }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
As a result, it's very easy to <strong>combine modifiers:</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="field">
|
||||
<a class="button is-primary is-small" disabled>Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-info is-loading">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-danger is-outlined is-large">Button</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{ button_combinations }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -39,7 +39,7 @@ breadcrumb:
|
||||
|
||||
{% capture size1 %}
|
||||
<td class="is-narrow">
|
||||
<p class="notification is-success"><code>{{ initial_vars.size-1.value }}</code></p>
|
||||
<p class="notification is-primary"><code>{{ initial_vars.size-1.value }}</code></p>
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
@ -51,7 +51,7 @@ breadcrumb:
|
||||
|
||||
{% capture left %}
|
||||
<td class="is-narrow">
|
||||
<p class="notification is-success">left-aligned</p>
|
||||
<p class="notification is-primary">left-aligned</p>
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
|
||||
@ -8,49 +8,6 @@ fixed_navbar: true
|
||||
|
||||
{% include index/intro.html %}
|
||||
|
||||
<section class="hero is-primary">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<nav class="columns">
|
||||
<a class="column has-text-centered" href="{{ site.url }}/documentation/overview/responsiveness/">
|
||||
<span class="icon is-large" style="margin-right: -15px;">
|
||||
<i class="fas fa-lg fa-mobile-alt"></i>
|
||||
</span>
|
||||
<span class="icon is-large">
|
||||
<i class="fas fa-2x fa-tablet-alt"></i>
|
||||
</span>
|
||||
<span class="icon is-large" style="margin-right: 10px;">
|
||||
<i class="fas fa-3x fa-desktop"></i>
|
||||
</span>
|
||||
<p class="title is-4" style="margin-top: 0.5em;"><strong>100% Responsive</strong></p>
|
||||
<p class="subtitle">Designed for <strong>mobile</strong> first</p>
|
||||
</a>
|
||||
<a class="column has-text-centered" href="{{ site.url }}/documentation/overview/modular/">
|
||||
<span class="icon is-large">
|
||||
<i class="fas fa-3x fa-cubes"></i>
|
||||
</span>
|
||||
<p class="title is-4" style="margin-top: 0.5em;"><strong>Modular</strong></p>
|
||||
<p class="subtitle">Just import what you <strong>need</strong></p>
|
||||
</a>
|
||||
<a class="column has-text-centered" href="{{ site.url }}/documentation/columns/basics/">
|
||||
<span class="icon is-large">
|
||||
<i class="fab fa-3x fa-css3"></i>
|
||||
</span>
|
||||
<p class="title is-4" style="margin-top: 0.5em;"><strong>Modern</strong></p>
|
||||
<p class="subtitle">Built with <strong>Flexbox</strong></p>
|
||||
</a>
|
||||
<a class="column has-text-centered" href="{{ site.data.meta.github }}">
|
||||
<span class="icon is-large">
|
||||
<i class="fab fa-3x fa-github"></i>
|
||||
</span>
|
||||
<p class="title is-4" style="margin-top: 0.5em;"><strong>Free</strong></p>
|
||||
<p class="subtitle">Open source on <strong>GitHub</strong></p>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bd-tws-home">
|
||||
{% include elements/tws.html %}
|
||||
</section>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user