library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2025-01-09 15:44:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix button icons

Browse Source
This commit is contained in:
Jeremy Thomas 2016-10-30 10:41:53 +00:00
parent 2e7e1d7c75
commit 7720041292
23 changed files with 840 additions and 466 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
CHANGELOG.md
View File

@ -1,5 +1,12 @@
# Bulma Changelog # Bulma Changelog
## 0.3.0
# Use `rem` and `em`
# Move variables to their own file
# Remove small tag
# Fix Font Awesome icons in buttons
## 0.2.2 ## 0.2.2
* Fix: remove multiple imports * Fix: remove multiple imports

1
docs/.gitignore vendored
View File

@ -11,5 +11,6 @@ npm-debug.log
.sass-cache .sass-cache
/_sass /_sass
/bulma /bulma
/fontawesome
/styles/node_modules /styles/node_modules
_site _site

1
docs/_config.yml
View File

@ -8,6 +8,7 @@ description: "Bulma is an open source CSS framework based on Flexbox and built
markdown: kramdown markdown: kramdown
permalink: pretty permalink: pretty
url: http://bulma.io url: http://bulma.io
fontawesome: https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css
# Variables # Variables

2
docs/_includes/head.html
View File

@ -6,7 +6,7 @@
<title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title> <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> --> <link rel="stylesheet" href="{{ site.fontawesome }}">
<link rel="stylesheet" href="{{ site.url }}/css/bulma-docs.css"> <link rel="stylesheet" href="{{ site.url }}/css/bulma-docs.css">
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}"> <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">

30
docs/bulma-docs.sass
View File

@ -20,7 +20,7 @@ body.page-grid .column > .notification
+tablet +tablet
.header-item .button + .button .header-item .button + .button
margin-left: 10px margin-left: 0.75rem
// Additional // Additional
svg svg
@ -221,13 +221,13 @@ html.route-index #carbon
background: $white background: $white
border-radius: $radius-large border-radius: $radius-large
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
padding: 20px padding: 1.5rem
#mc_embed_signup #mc_embed_signup
.control .control
margin-bottom: 0 margin-bottom: 0
.notification .notification
margin-top: 10px margin-top: 0.75rem
#social #social
align-items: center align-items: center
@ -261,12 +261,12 @@ html.route-index #carbon
border: 1px solid $warning border: 1px solid $warning
border-top-right-radius: $radius border-top-right-radius: $radius
color: $warning-invert color: $warning-invert
padding: 15px 20px padding: 1.25rem 1.5rem
position: relative position: relative
&:not(:first-child) &:not(:first-child)
margin-top: 30px margin-top: 2rem
&:not(:last-child) &:not(:last-child)
margin-bottom: 20px margin-bottom: 1.5rem
&:before &:before
background: $warning background: $warning
border-radius: $radius $radius 0 0 border-radius: $radius $radius 0 0
@ -292,11 +292,11 @@ html.route-index #carbon
border: 1px solid $warning border: 1px solid $warning
border-radius: 0 0 $radius $radius border-radius: 0 0 $radius $radius
border-top: none border-top: none
margin-top: -20px margin-top: -1.5rem
pre pre
max-height: 600px max-height: 600px
&:not(:last-child) &:not(:last-child)
margin-bottom: 40px margin-bottom: 3rem
$structure: $danger $structure: $danger
$structure-invert: $danger-invert $structure-invert: $danger-invert
@ -304,7 +304,7 @@ $structure-invert: $danger-invert
.structure .structure
border-color: $structure border-color: $structure
border-radius: $radius border-radius: $radius
padding: 20px padding: 1.5rem
&:before &:before
background: $structure background: $structure
color: $structure-invert color: $structure-invert
@ -331,11 +331,11 @@ $structure-invert: $danger-invert
padding: 3px 5px padding: 3px 5px
z-index: 2 z-index: 2
&.is-structure-container &.is-structure-container
padding: 20px 10px 10px padding: 1.5rem 0.75rem 0.75rem
&:after &:after
align-items: flex-start align-items: flex-start
justify-content: flex-start justify-content: flex-start
padding: 5px 10px padding: 0.5rem 0.75rem
.highlight .highlight
position: relative position: relative
@ -360,11 +360,11 @@ $structure-invert: $danger-invert
+tablet +tablet
.section:not(.is-fullwidth) > .example:not(.is-fullwidth) .section:not(.is-fullwidth) > .example:not(.is-fullwidth)
margin-left: 20px margin-left: 1.5rem
margin-right: 20px margin-right: 1.5rem
& + .highlight & + .highlight
margin-left: 20px margin-left: 1.5rem
margin-right: 20px margin-right: 1.5rem
.section.is-fullwidth .section.is-fullwidth
padding: 0 !important padding: 0 !important

690
docs/css/bulma-docs.css
View File

File diff suppressed because it is too large Load Diff

224
docs/documentation/elements/button.html
View File

@ -256,6 +256,23 @@ doc-subtab: button
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<p class="control">
<a class="button">
<span class="icon is-small">
<i class="fa fa-bold"></i>
</span>
</a>
<a class="button">
<span class="icon is-small">
<i class="fa fa-italic"></i>
</span>
</a>
<a class="button">
<span class="icon is-small">
<i class="fa fa-underline"></i>
</span>
</a>
</p>
<p class="control"> <p class="control">
<a class="button"> <a class="button">
<span class="icon"> <span class="icon">
@ -345,6 +362,140 @@ doc-subtab: button
</div> </div>
</div> </div>
<div class="columns">
<div class="column">
<div class="content">
<p>
<span class="tag is-success">New!</span>
</p>
<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>
<p class="control">
<a class="button is-small">
<span class="icon is-small">
<i class="fa fa-header"></i>
</span>
</a>
</p>
<p class="control">
<a class="button">
<span class="icon is-small">
<i class="fa fa-header"></i>
</span>
</a>
<a class="button">
<span class="icon">
<i class="fa fa-header"></i>
</span>
</a>
</p>
<p class="control">
<a class="button is-medium">
<span class="icon is-small">
<i class="fa fa-header"></i>
</span>
</a>
<a class="button is-medium">
<span class="icon">
<i class="fa fa-header"></i>
</span>
</a>
<a class="button is-medium">
<span class="icon is-medium">
<i class="fa fa-header"></i>
</span>
</a>
</p>
<p class="control">
<a class="button is-large">
<span class="icon is-small">
<i class="fa fa-header"></i>
</span>
</a>
<a class="button is-large">
<span class="icon">
<i class="fa fa-header"></i>
</span>
</a>
<a class="button is-large">
<span class="icon is-medium">
<i class="fa fa-header"></i>
</span>
</a>
<a class="button is-large">
<span class="icon is-large">
<i class="fa fa-header"></i>
</span>
</a>
</p>
</div>
<div class="column">
{% highlight html %}
<p class="control">
<a class="button is-small">
<span class="icon is-small">
<i class="fa fa-header"></i>
</span>
</a>
</p>
<p class="control">
<a class="button">
<span class="icon is-small">
<i class="fa fa-header"></i>
</span>
</a>
<a class="button">
<span class="icon">
<i class="fa fa-header"></i>
</span>
</a>
</p>
<p class="control">
<a class="button is-medium">
<span class="icon is-small">
<i class="fa fa-header"></i>
</span>
</a>
<a class="button is-medium">
<span class="icon">
<i class="fa fa-header"></i>
</span>
</a>
<a class="button is-medium">
<span class="icon is-medium">
<i class="fa fa-header"></i>
</span>
</a>
</p>
<p class="control">
<a class="button is-large">
<span class="icon is-small">
<i class="fa fa-header"></i>
</span>
</a>
<a class="button is-large">
<span class="icon">
<i class="fa fa-header"></i>
</span>
</a>
<a class="button is-large">
<span class="icon is-medium">
<i class="fa fa-header"></i>
</span>
</a>
<a class="button is-large">
<span class="icon is-large">
<i class="fa fa-header"></i>
</span>
</a>
</p>
{% endhighlight %}
</div>
</div>
<hr> <hr>
<h3 class="title">Button group</h3> <h3 class="title">Button group</h3>
@ -439,6 +590,79 @@ doc-subtab: button
<span>Right</span> <span>Right</span>
</a> </a>
</p> </p>
{% endhighlight %}
<hr>
<h3 class="title">Button group with addons</h3>
<div class="content">
<p>You can group together addons as well:</p>
</div>
<div class="example">
<div class="control is-grouped">
<p class="control has-addons">
<a class="button">
<span class="icon is-small">
<i class="fa fa-bold"></i>
</span>
<span>Bold</span>
</a>
<a class="button">
<span class="icon is-small">
<i class="fa fa-italic"></i>
</span>
<span>Italic</span>
</a>
<a class="button">
<span class="icon is-small">
<i class="fa fa-underline"></i>
</span>
<span>Underline</span>
</a>
</p>
<p class="control has-addons">
<a class="button">
<span class="icon is-small">
<i class="fa fa-align-left"></i>
</span>
<span>Left</span>
</a>
<a class="button">
<span class="icon is-small">
<i class="fa fa-align-center"></i>
</span>
<span>Center</span>
</a>
<a class="button">
<span class="icon is-small">
<i class="fa fa-align-right"></i>
</span>
<span>Right</span>
</a>
</p>
</div>
</div>
{% highlight html %}
<p class="control has-addons">
<a class="button">
<span class="icon is-small">
<i class="fa fa-align-left"></i>
</span>
<span>Left</span>
</a>
<a class="button">
<span class="icon is-small">
<i class="fa fa-align-center"></i>
</span>
<span>Center</span>
</a>
<a class="button">
<span class="icon is-small">
<i class="fa fa-align-right"></i>
</span>
<span>Right</span>
</a>
</p>
{% endhighlight %} {% endhighlight %}
</div> </div>

24
docs/documentation/elements/form.html
View File

@ -77,11 +77,15 @@ doc-subtab: form
No No
</label> </label>
</p> </p>
<div class="control is-grouped">
<p class="control"> <p class="control">
<button class="button is-primary">Submit</button> <button class="button is-primary">Submit</button>
</p>
<p class="control">
<button class="button is-link">Cancel</button> <button class="button is-link">Cancel</button>
</p> </p>
</div> </div>
</div>
<div class="column is-half"> <div class="column is-half">
{% highlight html %} {% highlight html %}
<label class="label">Name</label> <label class="label">Name</label>
@ -129,10 +133,14 @@ doc-subtab: form
No No
</label> </label>
</p> </p>
<p class="control"> <div class="control is-grouped">
<p class="control">
<button class="button is-primary">Submit</button> <button class="button is-primary">Submit</button>
</p>
<p class="control">
<button class="button is-link">Cancel</button> <button class="button is-link">Cancel</button>
</p> </p>
</div>
{% endhighlight %} {% endhighlight %}
</div> </div>
</div> </div>
@ -363,11 +371,15 @@ doc-subtab: form
No No
</label> </label>
</p> </p>
<div class="control is-grouped">
<p class="control"> <p class="control">
<button class="button is-primary" disabled>Submit</button> <button class="button is-primary" disabled>Submit</button>
</p>
<p class="control">
<button class="button" disabled>Cancel</button> <button class="button" disabled>Cancel</button>
</p> </p>
</div> </div>
</div>
<div class="column is-half"> <div class="column is-half">
{% highlight html %} {% highlight html %}
<p class="control"> <p class="control">
@ -392,10 +404,14 @@ doc-subtab: form
No No
</label> </label>
</p> </p>
<p class="control"> <div class="control is-grouped">
<p class="control">
<button class="button is-primary" disabled>Submit</button> <button class="button is-primary" disabled>Submit</button>
</p>
<p class="control">
<button class="button" disabled>Cancel</button> <button class="button" disabled>Cancel</button>
</p> </p>
</div>
{% endhighlight %} {% endhighlight %}
</div> </div>
</div> </div>

40
docs/documentation/elements/tag.html
View File

@ -17,7 +17,7 @@ doc-subtab: tag
<div class="columns"> <div class="columns">
<div class="column is-4"> <div class="column is-4">
By default, a <strong>tag</strong> is a 24px high label. By default, a <strong>tag</strong> is a 1.5rem high label.
</div> </div>
<div class="column is-2"> <div class="column is-2">
<span class="tag"> <span class="tag">
@ -35,14 +35,29 @@ doc-subtab: tag
<div class="columns"> <div class="columns">
<div class="column is-4"> <div class="column is-4">
There are <strong>6 different colors</strong> available. Like with buttons, there are <strong>9 different colors</strong> available.
</div> </div>
<div class="column is-2"> <div class="column is-2">
<p class="control">
<span class="tag is-black">
Black
</span>
</p>
<p class="control"> <p class="control">
<span class="tag is-dark"> <span class="tag is-dark">
Dark Dark
</span> </span>
</p> </p>
<p class="control">
<span class="tag is-light">
Light
</span>
</p>
<p class="control">
<span class="tag is-white">
White
</span>
</p>
<p class="control"> <p class="control">
<span class="tag is-primary"> <span class="tag is-primary">
Primary Primary
@ -69,7 +84,10 @@ doc-subtab: tag
</div> </div>
<div class="column is-6"> <div class="column is-6">
{% highlight html %} {% highlight html %}
<span class="tag is-black">Black</span>
<span class="tag is-dark">Dark</span> <span class="tag is-dark">Dark</span>
<span class="tag is-light">Light</span>
<span class="tag is-white">White</span>
<span class="tag is-primary">Primary</span> <span class="tag is-primary">Primary</span>
<span class="tag is-info">Info</span> <span class="tag is-info">Info</span>
<span class="tag is-success">Success</span> <span class="tag is-success">Success</span>
@ -81,14 +99,9 @@ doc-subtab: tag
<div class="columns"> <div class="columns">
<div class="column is-4"> <div class="column is-4">
And <strong>3 additional</strong> sizes. And <strong>2 additional</strong> sizes.
</div> </div>
<div class="column is-2"> <div class="column is-2">
<p class="control">
<span class="tag is-dark is-small">
Small
</span>
</p>
<p class="control"> <p class="control">
<span class="tag is-primary is-medium"> <span class="tag is-primary is-medium">
Medium Medium
@ -102,7 +115,6 @@ doc-subtab: tag
</div> </div>
<div class="column is-6"> <div class="column is-6">
{% highlight html %} {% highlight html %}
<span class="tag is-dark is-small">Small</span>
<span class="tag is-primary is-medium">Medium</span> <span class="tag is-primary is-medium">Medium</span>
<span class="tag is-info is-large">Large</span> <span class="tag is-info is-large">Large</span>
{% endhighlight %} {% endhighlight %}
@ -114,12 +126,6 @@ doc-subtab: tag
You can also append a <strong>delete button</strong>. You can also append a <strong>delete button</strong>.
</div> </div>
<div class="column is-2"> <div class="column is-2">
<p class="control">
<span class="tag is-info is-small">
Foo
<button class="delete is-small"></button>
</span>
</p>
<p class="control"> <p class="control">
<span class="tag is-success"> <span class="tag is-success">
Bar Bar
@ -141,10 +147,6 @@ doc-subtab: tag
</div> </div>
<div class="column is-6"> <div class="column is-6">
{% highlight html %} {% highlight html %}
<span class="tag is-info is-small">
Foo
<button class="delete is-small"></button>
</span>
<span class="tag is-success"> <span class="tag is-success">
Bar Bar
<button class="delete is-small"></button> <button class="delete is-small"></button>

6
sass/base/generic.sass
View File

@ -85,12 +85,12 @@ strong
pre pre
background-color: $pre-background background-color: $pre-background
color: $pre color: $pre
font-size: 0.8em font-size: 0.75em
white-space: pre white-space: pre
word-wrap: normal word-wrap: normal
code code
background-color: $pre-background background: none
color: $pre color: inherit
display: block display: block
font-size: 1em font-size: 1em
overflow-x: auto overflow-x: auto

1
sass/elements/_all.sass
View File

@ -8,6 +8,7 @@
@import "notification.sass" @import "notification.sass"
@import "progress.sass" @import "progress.sass"
@import "table.sass" @import "table.sass"
@import "tag.sass"
@import "title.sass" @import "title.sass"
@import "other.sass" @import "other.sass"

65
sass/elements/button.sass
View File

@ -1,3 +1,7 @@
$button: $grey-darker !default
$button-background: $white !default
$button-border: $grey-lighter !default
$button-hover: $link-hover !default $button-hover: $link-hover !default
$button-hover-border: $link-hover-border !default $button-hover-border: $link-hover-border !default
@ -9,17 +13,60 @@ $button-active-border: $link-active-border !default
$button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
@function buttonIconSpacing($button-size, $icon-width)
// The rem height of the button
$button-height: 2.5 * $button-size
// For the button to be square, the horizontal padding + the icon width must equal the button height.
// We know that $horizontal-padding = 2em
$horizontal-padding: 2 * $button-size
// We want to solve:
// $button-height = $horizontal-padding + $icon-width + $x
$x: $button-height - $horizontal-padding - $icon-width
// We divide by 2 to apply this margin on both the left and right sides
$negative-margin: abs($x) / 2
// We need to remove 1px for the border as well
@return calc(-1px - #{$negative-margin})
=button-icon($button-size)
.icon
&:first-child
margin-left: buttonIconSpacing($button-size, 1.5rem)
&:last-child
margin-right: buttonIconSpacing($button-size, 1.5rem)
&.is-small
&:first-child
margin-left: buttonIconSpacing($button-size, 1rem)
&:last-child
margin-right: buttonIconSpacing($button-size, 1rem)
&.is-medium
&:first-child
margin-left: buttonIconSpacing($button-size, 2rem)
&:last-child
margin-right: buttonIconSpacing($button-size, 2rem)
&.is-large
&:first-child
margin-left: buttonIconSpacing($button-size, 3rem)
&:last-child
margin-right: buttonIconSpacing($button-size, 3rem)
// The button sizes use mixins so they can be used at different breakpoints
=button-small =button-small
border-radius: $radius-small border-radius: $radius-small
font-size: $size-small font-size: $size-small
+button-icon($size-small)
=button-medium =button-medium
font-size: $size-medium font-size: $size-medium
+button-icon($size-medium)
=button-large =button-large
font-size: $size-large font-size: $size-large
+button-icon($size-large)
.button .button
+control +control
+unselectable +unselectable
background-color: $button-background
border: 1px solid $button-border
color: $button
cursor: pointer cursor: pointer
justify-content: center justify-content: center
padding-left: 1em padding-left: 1em
@ -28,14 +75,12 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
white-space: nowrap white-space: nowrap
strong strong
color: inherit color: inherit
.icon, +button-icon($size-normal)
.tag .icon
&:first-child &:first-child:not(:last-child)
margin-left: -2px margin-right: 0.25rem !important
margin-right: 4px &:last-child:not(:first-child)
&:last-child margin-left: 0.25rem !important
margin-left: 4px
margin-right: -2px
// States // States
&:hover, &:hover,
&.is-hovered &.is-hovered
@ -54,7 +99,7 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
// Colors // Colors
&.is-link &.is-link
background-color: transparent background-color: transparent
border-width: 0 border-color: transparent
color: $text color: $text
text-decoration: underline text-decoration: underline
&:hover, &:hover,
@ -70,7 +115,7 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
$color-invert: nth($pair, 2) $color-invert: nth($pair, 2)
&.is-#{$name} &.is-#{$name}
background-color: $color background-color: $color
border-width: 0 border-color: transparent
color: $color-invert color: $color-invert
&:hover, &:hover,
&.is-hovered &.is-hovered

2
sass/elements/content.sass
View File

@ -24,7 +24,7 @@
h5, h5,
h6 h6
color: $text-strong color: $text-strong
font-weight: $weight-title-normal font-weight: $weight-normal
line-height: 1.125 line-height: 1.125
h1 h1
font-size: 2em font-size: 2em

6
sass/elements/form.sass
View File

@ -151,7 +151,7 @@ $input-radius: $radius !default
.help .help
display: block display: block
font-size: 0.875em font-size: $size-small
margin-top: 5px margin-top: 5px
@each $name, $pair in $colors @each $name, $pair in $colors
$color: nth($pair, 1) $color: nth($pair, 1)
@ -175,7 +175,7 @@ $input-radius: $radius !default
position: relative position: relative
text-align: left text-align: left
&:not(:last-child) &:not(:last-child)
margin-bottom: 10px margin-bottom: 0.75rem
// Modifiers // Modifiers
&.has-addons &.has-addons
display: flex display: flex
@ -278,7 +278,7 @@ $input-radius: $radius !default
& > .control & > .control
&:not(:last-child) &:not(:last-child)
margin-bottom: 0 margin-bottom: 0
margin-right: 10px margin-right: 0.75rem
&.is-expanded &.is-expanded
flex-grow: 1 flex-grow: 1
flex-shrink: 1 flex-shrink: 1

7
sass/elements/notification.sass
View File

@ -3,12 +3,13 @@
+clearfix +clearfix
background-color: $background background-color: $background
border-radius: $radius border-radius: $radius
padding: 16px 20px padding: 1.25rem 1.5rem
position: relative position: relative
.delete .delete
border-radius: 0 $radius border-radius: 0 $radius
float: right position: absolute
margin: -16px -20px 0 20px right: 0
top: 0
.title, .title,
.subtitle, .subtitle,
.content .content

55
sass/elements/other.sass
View File

@ -11,7 +11,7 @@
margin: 0 20px margin: 0 20px
max-width: none max-width: none
+widescreen +widescreen
max-width: 1200px max-width: 1080px
.delete .delete
+delete +delete
@ -22,17 +22,17 @@
vertical-align: top vertical-align: top
.icon .icon
+fa(21px, 24px) +fa(21px, 1.5rem)
.fa .fa
font-size: inherit font-size: inherit
line-height: inherit line-height: inherit
// Sizes // Sizes
&.is-small &.is-small
+fa(14px, 16px) +fa(14px, 1rem)
&.is-medium &.is-medium
+fa(28px, 32px) +fa(28px, 2rem)
&.is-large &.is-large
+fa(42px, 48px) +fa(42px, 3rem)
.heading .heading
display: block display: block
@ -60,48 +60,3 @@
display: inline-block display: inline-block
font-size: $size-medium font-size: $size-medium
vertical-align: top vertical-align: top
.tag
align-items: center
background-color: $background
border-radius: 290486px
color: $text
display: inline-flex
font-size: 12px
height: 24px
justify-content: center
line-height: 16px
padding-left: 10px
padding-right: 10px
vertical-align: top
white-space: nowrap
.delete
margin-left: 4px
margin-right: -6px
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background-color: $color
color: $color-invert
// Sizes
&.is-small
font-size: $size-small
height: 20px
padding-left: 8px
padding-right: 8px
&.is-medium
font-size: $size-normal
height: 32px
padding-left: 14px
padding-right: 14px
&.is-large
font-size: $size-5
height: 40px
line-height: 24px
padding-left: 18px
padding-right: 18px
.delete
margin-left: 4px
margin-right: -8px

8
sass/elements/progress.sass
View File

@ -5,7 +5,7 @@
border: none border: none
border-radius: 290486px border-radius: 290486px
display: block display: block
height: 12px height: $size-normal
overflow: hidden overflow: hidden
padding: 0 padding: 0
width: 100% width: 100%
@ -25,8 +25,8 @@
background-color: $color background-color: $color
// Sizes // Sizes
&.is-small &.is-small
height: 8px height: $size-small
&.is-medium &.is-medium
height: 16px height: $size-medium
&.is-large &.is-large
height: 20px height: $size-large

29
sass/elements/tag.sass Normal file
View File

@ -0,0 +1,29 @@
.tag
align-items: center
background-color: $background
border-radius: 290486px
color: $text
display: inline-flex
font-size: $size-small
height: 2em
justify-content: center
line-height: 1.5
padding-left: 0.875em
padding-right: 0.875em
vertical-align: top
white-space: nowrap
.delete
margin-left: 0.25em
margin-right: -0.5em
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background-color: $color
color: $color-invert
// Sizes
&.is-medium
font-size: $size-normal
&.is-large
font-size: $size-medium

37
sass/elements/title.sass
View File

@ -1,22 +1,32 @@
$title: $grey-darker !default
$title-size: $size-3 !default
$title-weight: $weight-light !default
$title-weight-bold: $weight-semibold !default
$subtitle: $grey-dark !default
$subtitle-size: $size-5 !default
$subtitle-strong: $grey-darker !default
$subtitle-weight: $weight-light !default
.title, .title,
.subtitle .subtitle
+block +block
font-weight: $weight-title-normal
word-break: break-word word-break: break-word
em, em,
span span
font-weight: $weight-title-normal font-weight: $title-weight
a a
&:hover &:hover
border-bottom: 1px solid border-bottom: 1px solid
strong strong
font-weight: $weight-title-bold font-weight: $title-weight-bold
.tag .tag
vertical-align: bottom vertical-align: bottom
.title .title
color: $text-strong color: $title
font-size: $size-large font-size: $title-size
font-weight: $title-weight
line-height: 1.125 line-height: 1.125
strong strong
color: inherit color: inherit
@ -29,18 +39,14 @@
$i: index($sizes, $size) $i: index($sizes, $size)
&.is-#{$i} &.is-#{$i}
font-size: $size font-size: $size
// Modifiers
&.is-normal
font-weight: $weight-normal
strong
font-weight: $weight-bold
.subtitle .subtitle
color: $text color: $subtitle
font-size: $size-medium font-size: $subtitle-size
font-weight: $subtitle-weight
line-height: 1.25 line-height: 1.25
strong strong
color: $text-strong color: $subtitle-strong
& + .title & + .title
margin-top: -1.4rem margin-top: -1.4rem
// Colors // Colors
@ -48,8 +54,3 @@
$i: index($sizes, $size) $i: index($sizes, $size)
&.is-#{$i} &.is-#{$i}
font-size: $size font-size: $size
// Modifiers
&.is-normal
font-weight: $weight-normal
strong
font-weight: $weight-bold

3
sass/utilities/controls.sass
View File

@ -9,7 +9,7 @@ $control-radius-small: $radius-small !default
border-radius: $control-radius border-radius: $control-radius
box-shadow: none box-shadow: none
display: inline-flex display: inline-flex
font-size: 1em font-size: $size-normal
height: 2.5em height: 2.5em
justify-content: flex-start justify-content: flex-start
line-height: 1.5 line-height: 1.5
@ -27,6 +27,7 @@ $control-radius-small: $radius-small !default
&.is-disabled &.is-disabled
pointer-events: none pointer-events: none
// The controls sizes use mixins so they can be used at different breakpoints
=control-small =control-small
border-radius: $control-radius-small border-radius: $control-radius-small
font-size: $size-small font-size: $size-small

4
sass/utilities/functions.sass
View File

@ -23,6 +23,6 @@
@function findColorInvert($color) @function findColorInvert($color)
@if (colorLuminance($color) > 0.55) @if (colorLuminance($color) > 0.55)
@return rgba(black, 0.7) @return rgba(#000, 0.7)
@else @else
@return white @return #fff

27
sass/utilities/mixins.sass
View File

@ -36,39 +36,38 @@
border-radius: 290486px border-radius: 290486px
cursor: pointer cursor: pointer
display: inline-block display: inline-block
height: 24px font-size: $size-normal
height: 1.5em
outline: none outline: none
position: relative position: relative
transform: rotate(45deg)
transform-origin: center center
vertical-align: top vertical-align: top
width: 24px width: 1.5em
&:before, &:before,
&:after &:after
background-color: $white background-color: $white
content: "" content: ""
display: block display: block
height: 2px
left: 50% left: 50%
margin-left: -25%
margin-top: -1px
position: absolute position: absolute
top: 50% top: 50%
width: 50% transform: translateX(-50%) translateY(-50%)
&:before &:before
transform: rotate(45deg) height: 2px
width: 50%
&:after &:after
transform: rotate(-45deg) height: 50%
width: 2px
&:hover &:hover
background-color: rgba($black, 0.2) background-color: rgba($black, 0.2)
// Sizes // Sizes
&.is-small &.is-small
height: 16px font-size: $size-small
width: 16px
&.is-medium &.is-medium
height: 32px font-size: $size-medium
width: 32px
&.is-large &.is-large
height: 40px font-size: $size-large
width: 40px
=fa($size, $dimensions) =fa($size, $dimensions)
display: inline-block display: inline-block

13
sass/utilities/variables.sass
View File

@ -30,18 +30,17 @@ $family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ox
$family-monospace: "Inconsolata", "Consolas", "Monaco", monospace !default $family-monospace: "Inconsolata", "Consolas", "Monaco", monospace !default
$size-1: 3.5rem !default $size-1: 3.5rem !default
$size-2: 2.5rem !default $size-2: 2.75rem !default
$size-3: 1.75rem !default $size-3: 2rem !default
$size-4: 1.5rem !default $size-4: 1.5rem !default
$size-5: 1.25rem !default $size-5: 1.25rem !default
$size-6: 16px !default $size-6: 16px !default
$size-7: 0.75rem !default
$size-7: 0.875rem !default $weight-light: 300 !default
$weight-normal: 400 !default $weight-normal: 400 !default
$weight-semibold: 500 !default
$weight-bold: 700 !default $weight-bold: 700 !default
$weight-title-normal: 300 !default
$weight-title-bold: 500 !default
// Miscellaneous // Miscellaneous
$easing: ease-out !default $easing: ease-out !default
@ -117,7 +116,7 @@ $family-primary: $family-sans-serif !default
$family-code: $family-monospace !default $family-code: $family-monospace !default
$size-small: $size-7 !default $size-small: $size-7 !default
$size-normal: $size-6 !default $size-normal: 1rem !default
$size-medium: $size-5 !default $size-medium: $size-5 !default
$size-large: $size-4 !default $size-large: $size-4 !default