mirror of
https://github.com/jgthms/bulma.git
synced 2025-01-09 15:44:25 +00:00
Fix button icons
This commit is contained in:
Jeremy Thomas
parent
2e7e1d7c75
commit
7720041292
@ -1,5 +1,12 @@
|
||||
# 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
|
||||
|
||||
* Fix: remove multiple imports
|
||||
|
||||
1
docs/.gitignore
vendored
1
docs/.gitignore
vendored
@ -11,5 +11,6 @@ npm-debug.log
|
||||
.sass-cache
|
||||
/_sass
|
||||
/bulma
|
||||
/fontawesome
|
||||
/styles/node_modules
|
||||
_site
|
||||
|
||||
@ -8,6 +8,7 @@ description: "Bulma is an open source CSS framework based on Flexbox and built
|
||||
markdown: kramdown
|
||||
permalink: pretty
|
||||
url: http://bulma.io
|
||||
fontawesome: https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css
|
||||
|
||||
# Variables
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
<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="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">
|
||||
|
||||
@ -20,7 +20,7 @@ body.page-grid .column > .notification
|
||||
|
||||
+tablet
|
||||
.header-item .button + .button
|
||||
margin-left: 10px
|
||||
margin-left: 0.75rem
|
||||
|
||||
// Additional
|
||||
svg
|
||||
@ -221,13 +221,13 @@ html.route-index #carbon
|
||||
background: $white
|
||||
border-radius: $radius-large
|
||||
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
|
||||
.control
|
||||
margin-bottom: 0
|
||||
.notification
|
||||
margin-top: 10px
|
||||
margin-top: 0.75rem
|
||||
|
||||
#social
|
||||
align-items: center
|
||||
@ -261,12 +261,12 @@ html.route-index #carbon
|
||||
border: 1px solid $warning
|
||||
border-top-right-radius: $radius
|
||||
color: $warning-invert
|
||||
padding: 15px 20px
|
||||
padding: 1.25rem 1.5rem
|
||||
position: relative
|
||||
&:not(:first-child)
|
||||
margin-top: 30px
|
||||
margin-top: 2rem
|
||||
&:not(:last-child)
|
||||
margin-bottom: 20px
|
||||
margin-bottom: 1.5rem
|
||||
&:before
|
||||
background: $warning
|
||||
border-radius: $radius $radius 0 0
|
||||
@ -292,11 +292,11 @@ html.route-index #carbon
|
||||
border: 1px solid $warning
|
||||
border-radius: 0 0 $radius $radius
|
||||
border-top: none
|
||||
margin-top: -20px
|
||||
margin-top: -1.5rem
|
||||
pre
|
||||
max-height: 600px
|
||||
&:not(:last-child)
|
||||
margin-bottom: 40px
|
||||
margin-bottom: 3rem
|
||||
|
||||
$structure: $danger
|
||||
$structure-invert: $danger-invert
|
||||
@ -304,7 +304,7 @@ $structure-invert: $danger-invert
|
||||
.structure
|
||||
border-color: $structure
|
||||
border-radius: $radius
|
||||
padding: 20px
|
||||
padding: 1.5rem
|
||||
&:before
|
||||
background: $structure
|
||||
color: $structure-invert
|
||||
@ -331,11 +331,11 @@ $structure-invert: $danger-invert
|
||||
padding: 3px 5px
|
||||
z-index: 2
|
||||
&.is-structure-container
|
||||
padding: 20px 10px 10px
|
||||
padding: 1.5rem 0.75rem 0.75rem
|
||||
&:after
|
||||
align-items: flex-start
|
||||
justify-content: flex-start
|
||||
padding: 5px 10px
|
||||
padding: 0.5rem 0.75rem
|
||||
|
||||
.highlight
|
||||
position: relative
|
||||
@ -360,11 +360,11 @@ $structure-invert: $danger-invert
|
||||
|
||||
+tablet
|
||||
.section:not(.is-fullwidth) > .example:not(.is-fullwidth)
|
||||
margin-left: 20px
|
||||
margin-right: 20px
|
||||
margin-left: 1.5rem
|
||||
margin-right: 1.5rem
|
||||
& + .highlight
|
||||
margin-left: 20px
|
||||
margin-right: 20px
|
||||
margin-left: 1.5rem
|
||||
margin-right: 1.5rem
|
||||
|
||||
.section.is-fullwidth
|
||||
padding: 0 !important
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -256,6 +256,23 @@ doc-subtab: button
|
||||
|
||||
<div class="columns">
|
||||
<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">
|
||||
<a class="button">
|
||||
<span class="icon">
|
||||
@ -345,6 +362,140 @@ doc-subtab: button
|
||||
</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>
|
||||
|
||||
<h3 class="title">Button group</h3>
|
||||
@ -439,6 +590,79 @@ doc-subtab: button
|
||||
<span>Right</span>
|
||||
</a>
|
||||
</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 %}
|
||||
|
||||
</div>
|
||||
|
||||
@ -77,10 +77,14 @@ doc-subtab: form
|
||||
No
|
||||
</label>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button is-primary">Submit</button>
|
||||
<button class="button is-link">Cancel</button>
|
||||
</p>
|
||||
<div class="control is-grouped">
|
||||
<p class="control">
|
||||
<button class="button is-primary">Submit</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button is-link">Cancel</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}
|
||||
@ -129,10 +133,14 @@ doc-subtab: form
|
||||
No
|
||||
</label>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button is-primary">Submit</button>
|
||||
<button class="button is-link">Cancel</button>
|
||||
</p>
|
||||
<div class="control is-grouped">
|
||||
<p class="control">
|
||||
<button class="button is-primary">Submit</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button is-link">Cancel</button>
|
||||
</p>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@ -363,10 +371,14 @@ doc-subtab: form
|
||||
No
|
||||
</label>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button is-primary" disabled>Submit</button>
|
||||
<button class="button" disabled>Cancel</button>
|
||||
</p>
|
||||
<div class="control is-grouped">
|
||||
<p class="control">
|
||||
<button class="button is-primary" disabled>Submit</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button" disabled>Cancel</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}
|
||||
@ -392,10 +404,14 @@ doc-subtab: form
|
||||
No
|
||||
</label>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button is-primary" disabled>Submit</button>
|
||||
<button class="button" disabled>Cancel</button>
|
||||
</p>
|
||||
<div class="control is-grouped">
|
||||
<p class="control">
|
||||
<button class="button is-primary" disabled>Submit</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button" disabled>Cancel</button>
|
||||
</p>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -17,7 +17,7 @@ doc-subtab: tag
|
||||
|
||||
<div class="columns">
|
||||
<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 class="column is-2">
|
||||
<span class="tag">
|
||||
@ -35,14 +35,29 @@ doc-subtab: tag
|
||||
|
||||
<div class="columns">
|
||||
<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 class="column is-2">
|
||||
<p class="control">
|
||||
<span class="tag is-black">
|
||||
Black
|
||||
</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<span class="tag is-dark">
|
||||
Dark
|
||||
</span>
|
||||
</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">
|
||||
<span class="tag is-primary">
|
||||
Primary
|
||||
@ -69,7 +84,10 @@ doc-subtab: tag
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
{% highlight html %}
|
||||
<span class="tag is-black">Black</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-info">Info</span>
|
||||
<span class="tag is-success">Success</span>
|
||||
@ -81,14 +99,9 @@ doc-subtab: tag
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
And <strong>3 additional</strong> sizes.
|
||||
And <strong>2 additional</strong> sizes.
|
||||
</div>
|
||||
<div class="column is-2">
|
||||
<p class="control">
|
||||
<span class="tag is-dark is-small">
|
||||
Small
|
||||
</span>
|
||||
</p>
|
||||
<p class="control">
|
||||
<span class="tag is-primary is-medium">
|
||||
Medium
|
||||
@ -102,7 +115,6 @@ doc-subtab: tag
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
{% highlight html %}
|
||||
<span class="tag is-dark is-small">Small</span>
|
||||
<span class="tag is-primary is-medium">Medium</span>
|
||||
<span class="tag is-info is-large">Large</span>
|
||||
{% endhighlight %}
|
||||
@ -114,12 +126,6 @@ doc-subtab: tag
|
||||
You can also append a <strong>delete button</strong>.
|
||||
</div>
|
||||
<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">
|
||||
<span class="tag is-success">
|
||||
Bar
|
||||
@ -141,10 +147,6 @@ doc-subtab: tag
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
{% highlight html %}
|
||||
<span class="tag is-info is-small">
|
||||
Foo
|
||||
<button class="delete is-small"></button>
|
||||
</span>
|
||||
<span class="tag is-success">
|
||||
Bar
|
||||
<button class="delete is-small"></button>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
@import "notification.sass"
|
||||
@import "progress.sass"
|
||||
@import "table.sass"
|
||||
@import "tag.sass"
|
||||
@import "title.sass"
|
||||
|
||||
@import "other.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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
29
sass/elements/tag.sass
Normal file
29
sass/elements/tag.sass
Normal 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
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user