From 73ab6b214d0f9c4f035b318e23baac5d2851d5b6 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Sun, 30 Oct 2016 12:20:51 +0000 Subject: [PATCH] Fix table --- CHANGELOG.md | 3 + docs/css/bulma-docs.css | 174 +++----- docs/documentation/elements/content.html | 6 +- docs/documentation/elements/table.html | 488 ++++++++++++++--------- sass/elements/_all.sass | 1 + sass/elements/icon.sass | 13 + sass/elements/other.sass | 17 +- sass/elements/table.sass | 51 +-- 8 files changed, 392 insertions(+), 361 deletions(-) create mode 100644 sass/elements/icon.sass 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:

-

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 projectsYear startedLinks
Open source projectsYear startedLinks
- - - Android - - 2003 - - - - - - - - - - - - -
- - - Firefox - - 2003 - - - - - - - - - - - - -
- - - Linux - - 2003 - - - - - - - - - - - - -
- - - WordPress - - 2003 - - - - - - - - - - - - -
-
- -{% highlight html %} +{% capture table_example %} - - - - + + + + + + + + + + + - - - - + + + + + + + + + + + - - - - + + + + + + + + + + - - - - + + + + + + + + + + + - - - - + + + + + + + + + + + - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameInstrumentPosTeamPldWDLGFGAGDPtsQualification or relegation
NameInstrumentPosTeamPldWDLGFGAGDPtsQualification or relegation
Misty AbbottBass Guitar - - - - - - - + 1Leicester City (C) 38231236836+3281Qualification for the Champions League group stage
John SmithRhythm Guitar - - - - - - - - 2Arsenal38201176536+2971Qualification for the Champions League group stage
Robert MikelsLead Guitar - - - - - - - - 3Tottenham Hotspur38191366935+3470Qualification for the Champions League group stage
Karyn HolmbergDrums - - - + 4Manchester City38199107141+3066Qualification for the Champions League play-off round
5Manchester United38199104935+1466Qualification for the Europa League group stage
6Southampton38189115941+1863Qualification for the Europa League group stage
7West Ham United38161486551+1462Qualification for the Europa League third qualifying round
8Liverpool381612106350+1360
9Stoke City38149154155−1451
10Chelsea381214125953+650
11Everton381114135955+447
12Swansea City381211154252−1047
13Watford38129174050−1045
14West Bromwich Albion381013153448−1443
15Crystal Palace38119183951−1242
16AFC Bournemouth38119184567−2242
17Sunderland38912174862−1439
18Newcastle United (R) - - - + 38910194465−2137Relegation to the Football League Championship
19Norwich City (R) 3897223967−2834Relegation to the Football League Championship
20Aston Villa (R) + 3838272776−4917Relegation to the Football League Championship
+{% endcapture %} + +
+ {{table_example}} +
+ +{% highlight html %} +{{table_example}} {% endhighlight %}
@@ -276,6 +378,14 @@ doc-subtab: table Seven Eight + + Nine + Ten + + + Eleven + Twelve +
@@ -309,6 +419,14 @@ doc-subtab: table 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