bulma/docs/_posts/2017-10-09-roses-are-red-links-are-blue.md

93 lines
2.3 KiB
Markdown
Raw Normal View History

2017-10-09 17:13:02 +00:00
---
layout: post
title: "Roses are red Links are blue"
introduction: "What's better than one tag? Multiple tags!"
color: "link"
2018-04-09 20:16:50 +00:00
name: "Roses are red and links are blue"
icon: "link"
2017-10-09 17:13:02 +00:00
---
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**:
2017-10-10 08:54:53 +00:00
* [breadcrumb](/documentation/components/breadcrumb/)
* [dropdown](/documentation/components/dropdown/)
* [navbar](/documentation/components/navbar/)
2017-10-09 17:13:02 +00:00
* [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
2018-04-09 20:16:50 +00:00
```