- And 3 additional sizes.
+ And 2 additional sizes.
-
-
- Small
-
-
Medium
@@ -102,7 +115,6 @@ doc-subtab: tag
{% highlight html %}
-Small
Medium
Large
{% endhighlight %}
@@ -114,12 +126,6 @@ doc-subtab: tag
You can also append a delete button.
-
-
- Foo
-
-
-
Bar
@@ -141,10 +147,6 @@ doc-subtab: tag
{% highlight html %}
-
- Foo
-
-
Bar
diff --git a/sass/base/generic.sass b/sass/base/generic.sass
index 34264e0f..7ec59828 100644
--- a/sass/base/generic.sass
+++ b/sass/base/generic.sass
@@ -85,12 +85,12 @@ strong
pre
background-color: $pre-background
color: $pre
- font-size: 0.8em
+ font-size: 0.75em
white-space: pre
word-wrap: normal
code
- background-color: $pre-background
- color: $pre
+ background: none
+ color: inherit
display: block
font-size: 1em
overflow-x: auto
diff --git a/sass/elements/_all.sass b/sass/elements/_all.sass
index e92f8de9..5222c959 100644
--- a/sass/elements/_all.sass
+++ b/sass/elements/_all.sass
@@ -8,6 +8,7 @@
@import "notification.sass"
@import "progress.sass"
@import "table.sass"
+@import "tag.sass"
@import "title.sass"
@import "other.sass"
diff --git a/sass/elements/button.sass b/sass/elements/button.sass
index 8bd6513e..ca7761ca 100644
--- a/sass/elements/button.sass
+++ b/sass/elements/button.sass
@@ -1,3 +1,7 @@
+$button: $grey-darker !default
+$button-background: $white !default
+$button-border: $grey-lighter !default
+
$button-hover: $link-hover !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)
+@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
border-radius: $radius-small
font-size: $size-small
+ +button-icon($size-small)
=button-medium
font-size: $size-medium
+ +button-icon($size-medium)
=button-large
font-size: $size-large
+ +button-icon($size-large)
.button
+control
+unselectable
+ background-color: $button-background
+ border: 1px solid $button-border
+ color: $button
cursor: pointer
justify-content: center
padding-left: 1em
@@ -28,14 +75,12 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
white-space: nowrap
strong
color: inherit
- .icon,
- .tag
- &:first-child
- margin-left: -2px
- margin-right: 4px
- &:last-child
- margin-left: 4px
- margin-right: -2px
+ +button-icon($size-normal)
+ .icon
+ &:first-child:not(:last-child)
+ margin-right: 0.25rem !important
+ &:last-child:not(:first-child)
+ margin-left: 0.25rem !important
// States
&:hover,
&.is-hovered
@@ -54,7 +99,7 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
// Colors
&.is-link
background-color: transparent
- border-width: 0
+ border-color: transparent
color: $text
text-decoration: underline
&:hover,
@@ -70,7 +115,7 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
$color-invert: nth($pair, 2)
&.is-#{$name}
background-color: $color
- border-width: 0
+ border-color: transparent
color: $color-invert
&:hover,
&.is-hovered
diff --git a/sass/elements/content.sass b/sass/elements/content.sass
index c0bf9972..aeb26620 100644
--- a/sass/elements/content.sass
+++ b/sass/elements/content.sass
@@ -24,7 +24,7 @@
h5,
h6
color: $text-strong
- font-weight: $weight-title-normal
+ font-weight: $weight-normal
line-height: 1.125
h1
font-size: 2em
diff --git a/sass/elements/form.sass b/sass/elements/form.sass
index 0d31c025..de823feb 100644
--- a/sass/elements/form.sass
+++ b/sass/elements/form.sass
@@ -151,7 +151,7 @@ $input-radius: $radius !default
.help
display: block
- font-size: 0.875em
+ font-size: $size-small
margin-top: 5px
@each $name, $pair in $colors
$color: nth($pair, 1)
@@ -175,7 +175,7 @@ $input-radius: $radius !default
position: relative
text-align: left
&:not(:last-child)
- margin-bottom: 10px
+ margin-bottom: 0.75rem
// Modifiers
&.has-addons
display: flex
@@ -278,7 +278,7 @@ $input-radius: $radius !default
& > .control
&:not(:last-child)
margin-bottom: 0
- margin-right: 10px
+ margin-right: 0.75rem
&.is-expanded
flex-grow: 1
flex-shrink: 1
diff --git a/sass/elements/notification.sass b/sass/elements/notification.sass
index bfee4525..c5a8b547 100644
--- a/sass/elements/notification.sass
+++ b/sass/elements/notification.sass
@@ -3,12 +3,13 @@
+clearfix
background-color: $background
border-radius: $radius
- padding: 16px 20px
+ padding: 1.25rem 1.5rem
position: relative
.delete
border-radius: 0 $radius
- float: right
- margin: -16px -20px 0 20px
+ position: absolute
+ right: 0
+ top: 0
.title,
.subtitle,
.content
diff --git a/sass/elements/other.sass b/sass/elements/other.sass
index 91fe93c7..ace0e953 100644
--- a/sass/elements/other.sass
+++ b/sass/elements/other.sass
@@ -11,7 +11,7 @@
margin: 0 20px
max-width: none
+widescreen
- max-width: 1200px
+ max-width: 1080px
.delete
+delete
@@ -22,17 +22,17 @@
vertical-align: top
.icon
- +fa(21px, 24px)
+ +fa(21px, 1.5rem)
.fa
font-size: inherit
line-height: inherit
// Sizes
&.is-small
- +fa(14px, 16px)
+ +fa(14px, 1rem)
&.is-medium
- +fa(28px, 32px)
+ +fa(28px, 2rem)
&.is-large
- +fa(42px, 48px)
+ +fa(42px, 3rem)
.heading
display: block
@@ -60,48 +60,3 @@
display: inline-block
font-size: $size-medium
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
diff --git a/sass/elements/progress.sass b/sass/elements/progress.sass
index d109d73f..b17a6878 100644
--- a/sass/elements/progress.sass
+++ b/sass/elements/progress.sass
@@ -5,7 +5,7 @@
border: none
border-radius: 290486px
display: block
- height: 12px
+ height: $size-normal
overflow: hidden
padding: 0
width: 100%
@@ -25,8 +25,8 @@
background-color: $color
// Sizes
&.is-small
- height: 8px
+ height: $size-small
&.is-medium
- height: 16px
+ height: $size-medium
&.is-large
- height: 20px
+ height: $size-large
diff --git a/sass/elements/tag.sass b/sass/elements/tag.sass
new file mode 100644
index 00000000..8d62856a
--- /dev/null
+++ b/sass/elements/tag.sass
@@ -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
diff --git a/sass/elements/title.sass b/sass/elements/title.sass
index dae80ab0..b738daa1 100644
--- a/sass/elements/title.sass
+++ b/sass/elements/title.sass
@@ -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,
.subtitle
+block
- font-weight: $weight-title-normal
word-break: break-word
em,
span
- font-weight: $weight-title-normal
+ font-weight: $title-weight
a
&:hover
border-bottom: 1px solid
strong
- font-weight: $weight-title-bold
+ font-weight: $title-weight-bold
.tag
vertical-align: bottom
.title
- color: $text-strong
- font-size: $size-large
+ color: $title
+ font-size: $title-size
+ font-weight: $title-weight
line-height: 1.125
strong
color: inherit
@@ -29,18 +39,14 @@
$i: index($sizes, $size)
&.is-#{$i}
font-size: $size
- // Modifiers
- &.is-normal
- font-weight: $weight-normal
- strong
- font-weight: $weight-bold
.subtitle
- color: $text
- font-size: $size-medium
+ color: $subtitle
+ font-size: $subtitle-size
+ font-weight: $subtitle-weight
line-height: 1.25
strong
- color: $text-strong
+ color: $subtitle-strong
& + .title
margin-top: -1.4rem
// Colors
@@ -48,8 +54,3 @@
$i: index($sizes, $size)
&.is-#{$i}
font-size: $size
- // Modifiers
- &.is-normal
- font-weight: $weight-normal
- strong
- font-weight: $weight-bold
diff --git a/sass/utilities/controls.sass b/sass/utilities/controls.sass
index 1cd2b764..4b6b07e9 100644
--- a/sass/utilities/controls.sass
+++ b/sass/utilities/controls.sass
@@ -9,7 +9,7 @@ $control-radius-small: $radius-small !default
border-radius: $control-radius
box-shadow: none
display: inline-flex
- font-size: 1em
+ font-size: $size-normal
height: 2.5em
justify-content: flex-start
line-height: 1.5
@@ -27,6 +27,7 @@ $control-radius-small: $radius-small !default
&.is-disabled
pointer-events: none
+// The controls sizes use mixins so they can be used at different breakpoints
=control-small
border-radius: $control-radius-small
font-size: $size-small
diff --git a/sass/utilities/functions.sass b/sass/utilities/functions.sass
index fa090245..e38d1727 100644
--- a/sass/utilities/functions.sass
+++ b/sass/utilities/functions.sass
@@ -23,6 +23,6 @@
@function findColorInvert($color)
@if (colorLuminance($color) > 0.55)
- @return rgba(black, 0.7)
+ @return rgba(#000, 0.7)
@else
- @return white
+ @return #fff
diff --git a/sass/utilities/mixins.sass b/sass/utilities/mixins.sass
index 1d998312..dfc98713 100644
--- a/sass/utilities/mixins.sass
+++ b/sass/utilities/mixins.sass
@@ -36,39 +36,38 @@
border-radius: 290486px
cursor: pointer
display: inline-block
- height: 24px
+ font-size: $size-normal
+ height: 1.5em
outline: none
position: relative
+ transform: rotate(45deg)
+ transform-origin: center center
vertical-align: top
- width: 24px
+ width: 1.5em
&:before,
&:after
background-color: $white
content: ""
display: block
- height: 2px
left: 50%
- margin-left: -25%
- margin-top: -1px
position: absolute
top: 50%
- width: 50%
+ transform: translateX(-50%) translateY(-50%)
&:before
- transform: rotate(45deg)
+ height: 2px
+ width: 50%
&:after
- transform: rotate(-45deg)
+ height: 50%
+ width: 2px
&:hover
background-color: rgba($black, 0.2)
// Sizes
&.is-small
- height: 16px
- width: 16px
+ font-size: $size-small
&.is-medium
- height: 32px
- width: 32px
+ font-size: $size-medium
&.is-large
- height: 40px
- width: 40px
+ font-size: $size-large
=fa($size, $dimensions)
display: inline-block
diff --git a/sass/utilities/variables.sass b/sass/utilities/variables.sass
index c7934578..243e6c37 100644
--- a/sass/utilities/variables.sass
+++ b/sass/utilities/variables.sass
@@ -30,18 +30,17 @@ $family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ox
$family-monospace: "Inconsolata", "Consolas", "Monaco", monospace !default
$size-1: 3.5rem !default
-$size-2: 2.5rem !default
-$size-3: 1.75rem !default
+$size-2: 2.75rem !default
+$size-3: 2rem !default
$size-4: 1.5rem !default
$size-5: 1.25rem !default
$size-6: 16px !default
+$size-7: 0.75rem !default
-$size-7: 0.875rem !default
-
+$weight-light: 300 !default
$weight-normal: 400 !default
+$weight-semibold: 500 !default
$weight-bold: 700 !default
-$weight-title-normal: 300 !default
-$weight-title-bold: 500 !default
// Miscellaneous
$easing: ease-out !default
@@ -117,7 +116,7 @@ $family-primary: $family-sans-serif !default
$family-code: $family-monospace !default
$size-small: $size-7 !default
-$size-normal: $size-6 !default
+$size-normal: 1rem !default
$size-medium: $size-5 !default
$size-large: $size-4 !default