diff --git a/CHANGELOG.md b/CHANGELOG.md
index 03272944..5c6ae45c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,7 +5,10 @@
# Use `rem` and `em`
# Move variables to their own file
# Remove small tag
+# Add :focus state
# Fix Font Awesome icons in buttons
+# Fix table
+# Remove table .is-icon and .is-link
## 0.2.2
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 357e610d..42af8a3d 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -2052,6 +2052,52 @@ a.box:active {
top: 0.75em;
}
+.icon {
+ background: pink;
+ display: inline-block;
+ font-size: 21px;
+ height: 1.5rem;
+ line-height: 1.5rem;
+ text-align: center;
+ vertical-align: top;
+ width: 1.5rem;
+}
+
+.icon .fa {
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.icon.is-small {
+ display: inline-block;
+ font-size: 14px;
+ height: 1rem;
+ line-height: 1rem;
+ text-align: center;
+ vertical-align: top;
+ width: 1rem;
+}
+
+.icon.is-medium {
+ display: inline-block;
+ font-size: 28px;
+ height: 2rem;
+ line-height: 2rem;
+ text-align: center;
+ vertical-align: top;
+ width: 2rem;
+}
+
+.icon.is-large {
+ display: inline-block;
+ font-size: 42px;
+ height: 3rem;
+ line-height: 3rem;
+ text-align: center;
+ vertical-align: top;
+ width: 3rem;
+}
+
.image {
display: block;
position: relative;
@@ -2318,7 +2364,7 @@ a.box:active {
.table {
background-color: white;
color: #363636;
- margin-bottom: 20px;
+ margin-bottom: 1.5rem;
width: 100%;
}
@@ -2326,56 +2372,10 @@ a.box:active {
.table th {
border: 1px solid #dbdbdb;
border-width: 0 0 1px;
- padding: 8px 10px;
+ padding: 0.5em 0.75em;
vertical-align: top;
}
-.table td.is-icon,
-.table th.is-icon {
- padding: 5px;
- text-align: center;
- white-space: nowrap;
- width: 1%;
-}
-
-.table td.is-icon .fa,
-.table th.is-icon .fa {
- display: inline-block;
- font-size: 21px;
- height: 24px;
- line-height: 24px;
- text-align: center;
- vertical-align: top;
- width: 24px;
-}
-
-.table td.is-icon.is-link,
-.table th.is-icon.is-link {
- padding: 0;
-}
-
-.table td.is-icon.is-link > a,
-.table th.is-icon.is-link > a {
- padding: 5px;
-}
-
-.table td.is-link,
-.table th.is-link {
- padding: 0;
-}
-
-.table td.is-link > a,
-.table th.is-link > a {
- display: block;
- padding: 8px 10px;
-}
-
-.table td.is-link > a:hover,
-.table th.is-link > a:hover {
- background-color: #00d1b2;
- color: #fff;
-}
-
.table td.is-narrow,
.table th.is-narrow {
white-space: nowrap;
@@ -2388,7 +2388,7 @@ a.box:active {
}
.table tr:hover {
- background-color: whitesmoke;
+ background-color: #fafafa;
}
.table thead td,
@@ -2420,32 +2420,7 @@ a.box:active {
.table.is-narrow td,
.table.is-narrow th {
- padding: 5px 10px;
-}
-
-.table.is-narrow td.is-icon,
-.table.is-narrow th.is-icon {
- padding: 2px;
-}
-
-.table.is-narrow td.is-icon.is-link,
-.table.is-narrow th.is-icon.is-link {
- padding: 0;
-}
-
-.table.is-narrow td.is-icon.is-link > a,
-.table.is-narrow th.is-icon.is-link > a {
- padding: 2px;
-}
-
-.table.is-narrow td.is-link,
-.table.is-narrow th.is-link {
- padding: 0;
-}
-
-.table.is-narrow td.is-link > a,
-.table.is-narrow th.is-link > a {
- padding: 5px 10px;
+ padding: 0.25em 0.5em;
}
.table.is-striped tbody tr:nth-child(even) {
@@ -2658,14 +2633,14 @@ a.box:active {
max-width: 960px;
}
.container.is-fluid {
- margin: 0 20px;
+ margin: 0 1.5rem;
max-width: none;
}
}
@media screen and (min-width: 1180px) {
.container {
- max-width: 1080px;
+ max-width: 1200px;
}
}
@@ -2734,51 +2709,6 @@ a.box:active {
vertical-align: top;
}
-.icon {
- display: inline-block;
- font-size: 21px;
- height: 1.5rem;
- line-height: 1.5rem;
- text-align: center;
- vertical-align: top;
- width: 1.5rem;
-}
-
-.icon .fa {
- font-size: inherit;
- line-height: inherit;
-}
-
-.icon.is-small {
- display: inline-block;
- font-size: 14px;
- height: 1rem;
- line-height: 1rem;
- text-align: center;
- vertical-align: top;
- width: 1rem;
-}
-
-.icon.is-medium {
- display: inline-block;
- font-size: 28px;
- height: 2rem;
- line-height: 2rem;
- text-align: center;
- vertical-align: top;
- width: 2rem;
-}
-
-.icon.is-large {
- display: inline-block;
- font-size: 42px;
- height: 3rem;
- line-height: 3rem;
- text-align: center;
- vertical-align: top;
- width: 3rem;
-}
-
.heading {
display: block;
font-size: 11px;
diff --git a/docs/documentation/elements/content.html b/docs/documentation/elements/content.html
index aefa873b..73be639e 100644
--- a/docs/documentation/elements/content.html
+++ b/docs/documentation/elements/content.html
@@ -19,13 +19,13 @@ doc-subtab: content
When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use content as container. It can handle almost any HTML tag:
<p> paragraphs<ul> <ol> <dl> lists<ul> <ol> <dl> lists<h1> to <h6> headings<blockquotes> quotes<em> and <strong><table> <tr> <th> <td> tables<table> <tr> <th> <td> tables
- This content class can be used in any, whenever you just want to write some text. For example, it's used for the paragraph you're currently reading.
+ This content class can be used in any context where you just want to (or can only) write some text. For example, it's used for the paragraph you're currently reading.
diff --git a/docs/documentation/elements/table.html b/docs/documentation/elements/table.html
index b00b4aaa..a599aa91 100644
--- a/docs/documentation/elements/table.html
+++ b/docs/documentation/elements/table.html
@@ -13,210 +13,312 @@ doc-subtab: table
-
-
-
-
- |
- Open source projects |
- Year started |
- Links |
-
-
-
-
- |
- Open source projects |
- Year started |
- Links |
-
-
-
-
- |
-
- |
-
- Android
- |
-
- 2003
- |
-
-
-
-
- |
-
-
-
-
- |
-
-
-
-
- |
-
-
- |
-
- |
-
- Firefox
- |
-
- 2003
- |
-
-
-
-
- |
-
-
-
-
- |
-
-
-
-
- |
-
-
- |
-
- |
-
- Linux
- |
-
- 2003
- |
-
-
-
-
- |
-
-
-
-
- |
-
-
-
-
- |
-
-
- |
-
- |
-
- WordPress
- |
-
- 2003
- |
-
-
-
-
- |
-
-
-
-
- |
-
-
-
-
- |
-
-
-
-
-
-{% highlight html %}
+{% capture table_example %}
+{% endcapture %}
+
+
+ {{table_example}}
+
+
+{% highlight html %}
+{{table_example}}
{% endhighlight %}
@@ -276,6 +378,14 @@ doc-subtab: table
Seven |
Eight |
+
+ | Nine |
+ Ten |
+
+
+ | Eleven |
+ Twelve |
+
Seven |
Eight |
+
+ | Nine |
+ Ten |
+
+
+ | Eleven |
+ Twelve |
+
@@ -342,6 +460,14 @@ doc-subtab: table
Seven |
Eight |
+
+ | Nine |
+ Ten |
+
+
+ | Eleven |
+ Twelve |
+
diff --git a/sass/elements/_all.sass b/sass/elements/_all.sass
index 5222c959..54f5b2fc 100644
--- a/sass/elements/_all.sass
+++ b/sass/elements/_all.sass
@@ -4,6 +4,7 @@
@import "button.sass"
@import "content.sass"
@import "form.sass"
+@import "icon.sass"
@import "image.sass"
@import "notification.sass"
@import "progress.sass"
diff --git a/sass/elements/icon.sass b/sass/elements/icon.sass
new file mode 100644
index 00000000..2b1093bf
--- /dev/null
+++ b/sass/elements/icon.sass
@@ -0,0 +1,13 @@
+.icon
+ background: pink
+ +fa(21px, 1.5rem)
+ .fa
+ font-size: inherit
+ line-height: inherit
+ // Sizes
+ &.is-small
+ +fa(14px, 1rem)
+ &.is-medium
+ +fa(28px, 2rem)
+ &.is-large
+ +fa(42px, 3rem)
diff --git a/sass/elements/other.sass b/sass/elements/other.sass
index ace0e953..4eab6461 100644
--- a/sass/elements/other.sass
+++ b/sass/elements/other.sass
@@ -8,10 +8,10 @@
max-width: 960px
// Modifiers
&.is-fluid
- margin: 0 20px
+ margin: 0 1.5rem
max-width: none
+widescreen
- max-width: 1080px
+ max-width: 1200px
.delete
+delete
@@ -21,19 +21,6 @@
text-align: center
vertical-align: top
-.icon
- +fa(21px, 1.5rem)
- .fa
- font-size: inherit
- line-height: inherit
- // Sizes
- &.is-small
- +fa(14px, 1rem)
- &.is-medium
- +fa(28px, 2rem)
- &.is-large
- +fa(42px, 3rem)
-
.heading
display: block
font-size: 11px
diff --git a/sass/elements/table.sass b/sass/elements/table.sass
index 32032068..65d2c027 100644
--- a/sass/elements/table.sass
+++ b/sass/elements/table.sass
@@ -1,43 +1,25 @@
-$table: $text-strong !default
-$table-background: $white !default
-$table-border: $border !default
+$table: $grey-darker !default
+$table-background: $white !default
+$table-border: $grey-lighter !default
-$table-head: $text-light !default
+$table-head: $grey !default
-$table-row-hover-background: $white-ter !default
-$table-row-even-background: $white-bis !default
+$table-row-hover-background: $white-bis !default
+$table-row-even-background: $white-bis !default
+$table-row-even-hover-background: $white-ter !default
.table
background-color: $table-background
color: $table
- margin-bottom: 20px
+ margin-bottom: 1.5rem
width: 100%
td,
th
border: 1px solid $table-border
border-width: 0 0 1px
- padding: 8px 10px
+ padding: 0.5em 0.75em
vertical-align: top
// Modifiers
- &.is-icon
- padding: 5px
- text-align: center
- white-space: nowrap
- width: 1%
- .fa
- +fa(21px, 24px)
- &.is-link
- padding: 0
- & > a
- padding: 5px
- &.is-link
- padding: 0
- & > a
- display: block
- padding: 8px 10px
- &:hover
- background-color: $link
- color: $link-invert
&.is-narrow
white-space: nowrap
width: 1%
@@ -76,22 +58,11 @@ $table-row-even-background: $white-bis !default
&.is-narrow
td,
th
- padding: 5px 10px
- // Modifiers
- &.is-icon
- padding: 2px
- &.is-link
- padding: 0
- & > a
- padding: 2px
- &.is-link
- padding: 0
- & > a
- padding: 5px 10px
+ padding: 0.25em 0.5em
&.is-striped
tbody
tr
&:nth-child(even)
background-color: $table-row-even-background
&:hover
- background-color: $table-row-hover-background
+ background-color: $table-row-even-hover-background