mirror of
https://github.com/jgthms/bulma.git
synced 2024-10-17 09:04:18 +00:00
89 lines
2.1 KiB
Markdown
89 lines
2.1 KiB
Markdown
|
---
|
|||
|
|
layout: post
|
|||
|
|
title: "Roses are red – Links are blue"
|
|||
|
|
introduction: "What's better than one tag? Multiple tags!"
|
|||
|
|
color: "link"
|
|||
|
|
name: "Roses are red<br>Links are blue"
|
|||
|
|
icon: "tag"
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
By default, a browser will display links in <strong style="color: blue;">blue</strong>. Bulma has up until now used the `$primary` color as the `$link` color:
|
|||
|
|
|
|||
|
|
```sass
|
|||
|
|
// Old styles
|
|||
|
|
$link: $primary !default
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
But the _primary_ color is mostly used as the **brand** color, and is not necessarily well suited for links. For readability purposes, and to add more flexibility to your design choices:
|
|||
|
|
|
|||
|
|
* the `$link` color defaults to `$blue`
|
|||
|
|
* `$info` is using the new `$cyan` color
|
|||
|
|
* `$link` has been added to the `$colors` map as well
|
|||
|
|
|
|||
|
|
```sass
|
|||
|
|
// New styles
|
|||
|
|
$link: $blue !default
|
|||
|
|
$info: $cyan !default
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
<div class="message is-danger">
|
|||
|
|
<div class="message-header">
|
|||
|
|
Deprecation warning
|
|||
|
|
</div>
|
|||
|
|
<div class="message-body">
|
|||
|
|
<p>
|
|||
|
|
Because the modifier <code>is-link</code> for <strong>buttons</strong> already existed, it has been renamed to <code>is-text</code>.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
As such, the following components are now **blue**:
|
|||
|
|
|
|||
|
|
* [pagination](/documentation/components/pagination/)
|
|||
|
|
* [tabs](/documentation/components/tabs/)
|
|||
|
|
* [menu](/documentation/components/menu/)
|
|||
|
|
* [panel](/documentation/components/panel/)
|
|||
|
|
|
|||
|
|
All Bulma elements and components that support **color** modifiers now support the `.is-link` color:
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<div class="notification is-link">
|
|||
|
|
Link notification.
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="notification is-info">
|
|||
|
|
Info notification.
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<button class="button is-link">
|
|||
|
|
Link button
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<button class="button is-info">
|
|||
|
|
Info button
|
|||
|
|
</button>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
<div class="notification is-link">
|
|||
|
|
Link notification.
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="notification is-info">
|
|||
|
|
Info notification.
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<button class="button is-link">
|
|||
|
|
Link button
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<button class="button is-info">
|
|||
|
|
Info button
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
If you want to use the `$primary` color for your links, just **customize** your Bulma setup by including these rules:
|
|||
|
|
|
|||
|
|
```sass
|
|||
|
|
$link: $primary !default
|
|||
|
|
$link-invert: $primary-invert !default
|
|||
|
|
$link-focus-border: $primary !default
|
|||
|
|
```
|