From b93c3789b68f9a98285b21a20c09cd8b8c53797d Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Mon, 13 Mar 2017 12:05:02 +0000 Subject: [PATCH] Change default font size --- CHANGELOG.md | 5 +- docs/_layouts/post.html | 1 + docs/css/bulma-docs.css | 83 ++++++++++--------- .../components/media-object.html | 26 +++--- docs/documentation/components/modal.html | 2 +- docs/documentation/elements/button.html | 42 +++++----- docs/sass/global.sass | 2 +- sass/components/nav.sass | 9 +- sass/components/pagination.sass | 2 +- sass/elements/button.sass | 10 ++- sass/elements/form.sass | 1 - sass/utilities/controls.sass | 6 +- sass/utilities/mixins.sass | 3 + sass/utilities/variables.sass | 8 +- 14 files changed, 110 insertions(+), 90 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index bebc71d0..5b7278a7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,9 @@ # Bulma Changelog -## 0.3.3 +## 0.4 + +* **Default font-size is 16px** +* **New `.field` element ; `.control` repurposed** * Remove monospace named fonts * Remove icon spacing logic diff --git a/docs/_layouts/post.html b/docs/_layouts/post.html index 1b6a2994..52d06472 100644 --- a/docs/_layouts/post.html +++ b/docs/_layouts/post.html @@ -17,6 +17,7 @@ route: blog

{{ page.title }}

+
{{ content }}
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 9a6d28a6..23245cd5 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -95,7 +95,7 @@ th { html { background-color: white; - font-size: 14px; + font-size: 16px; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; min-width: 300px; @@ -582,11 +582,11 @@ a.box:active { font-size: 1rem; height: 2.25em; justify-content: flex-start; - line-height: 1.5; - padding-bottom: 0.425em; + line-height: 1.25; + padding-bottom: 0.5em; padding-left: 0.625em; padding-right: 0.625em; - padding-top: 0.325em; + padding-top: 0.5em; position: relative; vertical-align: top; -webkit-touch-callout: none; @@ -624,11 +624,11 @@ a.box:active { .button .icon:first-child:not(:last-child) { margin-left: calc(-0.375em - 1px); - margin-right: 0.375em; + margin-right: 0.1875em; } .button .icon:last-child:not(:first-child) { - margin-left: 0.375em; + margin-left: 0.1875em; margin-right: calc(-0.375em - 1px); } @@ -1253,7 +1253,7 @@ a.box:active { .button.is-small { border-radius: 2px; - font-size: 0.85rem; + font-size: 0.75rem; } .button.is-medium { @@ -1297,8 +1297,11 @@ a.box:active { position: absolute !important; } -button.button { +button.button, +input[type="submit"].button { line-height: 1; + padding-bottom: 0.4em; + padding-top: 0.35em; } .content { @@ -1442,7 +1445,7 @@ button.button { } .content.is-small { - font-size: 0.85rem; + font-size: 0.75rem; } .content.is-medium { @@ -1465,11 +1468,11 @@ button.button { font-size: 1rem; height: 2.25em; justify-content: flex-start; - line-height: 1.5; - padding-bottom: 0.425em; + line-height: 1.25; + padding-bottom: 0.5em; padding-left: 0.625em; padding-right: 0.625em; - padding-top: 0.325em; + padding-top: 0.5em; position: relative; vertical-align: top; background-color: white; @@ -1594,7 +1597,7 @@ button.button { .input.is-small, .textarea.is-small { border-radius: 2px; - font-size: 0.85rem; + font-size: 0.75rem; } .input.is-medium, @@ -1702,11 +1705,11 @@ button.button { font-size: 1rem; height: 2.25em; justify-content: flex-start; - line-height: 1.5; - padding-bottom: 0.425em; + line-height: 1.25; + padding-bottom: 0.5em; padding-left: 0.625em; padding-right: 0.625em; - padding-top: 0.325em; + padding-top: 0.5em; position: relative; vertical-align: top; background-color: white; @@ -1772,7 +1775,7 @@ button.button { .select.is-small { border-radius: 2px; - font-size: 0.85rem; + font-size: 0.75rem; } .select.is-medium { @@ -1803,7 +1806,7 @@ button.button { .help { display: block; - font-size: 0.85rem; + font-size: 0.75rem; margin-top: 0.25rem; } @@ -1843,7 +1846,6 @@ button.button { color: #ff3860; } -input[type="submit"].input, .select select { line-height: 1; } @@ -1998,7 +2000,7 @@ input[type="submit"].input, } .control.has-icon .input.is-small + .icon { - font-size: 0.85rem; + font-size: 0.75rem; } .control.has-icon .input.is-medium + .icon { @@ -2335,7 +2337,7 @@ input[type="submit"].input, } .progress.is-small { - height: 0.85rem; + height: 0.75rem; } .progress.is-medium { @@ -2422,7 +2424,7 @@ input[type="submit"].input, border-radius: 290486px; color: #4a4a4a; display: inline-flex; - font-size: 0.85rem; + font-size: 0.75rem; height: 2em; justify-content: center; line-height: 1.5; @@ -2537,11 +2539,11 @@ input[type="submit"].input, } .title.is-1 { - font-size: 3.5rem; + font-size: 3rem; } .title.is-2 { - font-size: 2.75rem; + font-size: 2.5rem; } .title.is-3 { @@ -2576,11 +2578,11 @@ input[type="submit"].input, } .subtitle.is-1 { - font-size: 3.5rem; + font-size: 3rem; } .subtitle.is-2 { - font-size: 2.75rem; + font-size: 2.5rem; } .subtitle.is-3 { @@ -3400,9 +3402,9 @@ input[type="submit"].input, .nav-toggle { cursor: pointer; display: block; - height: 3.5rem; + height: 3.25rem; position: relative; - width: 3.5rem; + width: 3.25rem; } .nav-toggle span { @@ -3467,6 +3469,7 @@ input[type="submit"].input, flex-shrink: 0; font-size: 1rem; justify-content: center; + line-height: 1.5; padding: 0.5rem 0.75rem; } @@ -3516,10 +3519,10 @@ a.nav-item.is-active { a.nav-item.is-tab { border-bottom: 1px solid transparent; border-top: 1px solid transparent; - padding-bottom: calc(0.5rem - 1px); + padding-bottom: calc(0.75rem - 1px); padding-left: 1rem; padding-right: 1rem; - padding-top: calc(0.5rem - 1px); + padding-top: calc(0.75rem - 1px); } .nav-item a.is-tab:hover, @@ -3532,7 +3535,7 @@ a.nav-item.is-tab:hover { a.nav-item.is-tab.is-active { border-bottom: 3px solid #00d1b2; color: #00d1b2; - padding-bottom: calc(0.5rem - 3px); + padding-bottom: calc(0.75rem - 3px); } @media screen and (min-width: 1000px) { @@ -3607,7 +3610,7 @@ a.nav-item.is-tab.is-active { align-items: stretch; background-color: white; display: flex; - min-height: 3.5rem; + min-height: 3.25rem; position: relative; text-align: center; z-index: 2; @@ -3616,7 +3619,7 @@ a.nav-item.is-tab.is-active { .nav > .container { align-items: stretch; display: flex; - min-height: 3.5rem; + min-height: 3.25rem; width: 100%; } @@ -3646,11 +3649,11 @@ a.nav-item.is-tab.is-active { font-size: 1rem; height: 2.25em; justify-content: flex-start; - line-height: 1.5; - padding-bottom: 0.425em; + line-height: 1.25; + padding-bottom: 0.5em; padding-left: 0.625em; padding-right: 0.625em; - padding-top: 0.325em; + padding-top: 0.5em; position: relative; vertical-align: top; -webkit-touch-callout: none; @@ -3695,7 +3698,7 @@ a.nav-item.is-tab.is-active { .pagination-next, .pagination-link { border: 1px solid #dbdbdb; - min-width: 2.5em; + min-width: 2.25em; } .pagination-previous:hover, @@ -4070,7 +4073,7 @@ label.panel-block:hover { } .tabs.is-small { - font-size: 0.85rem; + font-size: 0.75rem; } .tabs.is-medium { @@ -6134,7 +6137,7 @@ svg { #carbon { max-width: 340px; - min-height: 130px; + min-height: 150px; padding: 0; position: relative; } @@ -6187,7 +6190,7 @@ svg { #carbonads .carbon-poweredby { bottom: 0; color: #7a7a7a; - font-size: 0.85rem; + font-size: 0.75rem; left: 160px; line-height: 20px; padding: 0 15px 10px 0; diff --git a/docs/documentation/components/media-object.html b/docs/documentation/components/media-object.html index 2ff27693..f3ea9c7f 100644 --- a/docs/documentation/components/media-object.html +++ b/docs/documentation/components/media-object.html @@ -105,13 +105,15 @@ doc-subtab: media-object

-

- -

+
+

+ +

+
diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html index 1680babf..0611241a 100644 --- a/docs/documentation/elements/button.html +++ b/docs/documentation/elements/button.html @@ -354,16 +354,16 @@ doc-subtab: button {% capture button_only_icon_example %}

- - - + + +

- - - + + + @@ -373,9 +373,9 @@ doc-subtab: button

- - - + + + @@ -383,16 +383,16 @@ doc-subtab: button - - - + + +

- - - + + + @@ -400,14 +400,14 @@ doc-subtab: button - - - + + + - - - + + +

{% endcapture %} diff --git a/docs/sass/global.sass b/docs/sass/global.sass index c399cbfd..382d05f3 100644 --- a/docs/sass/global.sass +++ b/docs/sass/global.sass @@ -6,7 +6,7 @@ $carbon-space: 15px #carbon max-width: 340px - min-height: 100px + ($carbon-space * 2) + min-height: 120px + ($carbon-space * 2) padding: 0 position: relative &:hover diff --git a/sass/components/nav.sass b/sass/components/nav.sass index 0ca444a5..648784ab 100644 --- a/sass/components/nav.sass +++ b/sass/components/nav.sass @@ -1,4 +1,4 @@ -$nav-height: 3.5rem !default +$nav-height: 3.25rem !default // Components @@ -15,6 +15,7 @@ $nav-height: 3.5rem !default flex-shrink: 0 font-size: $size-normal justify-content: center + line-height: 1.5 padding: 0.5rem 0.75rem a flex-grow: 1 @@ -43,17 +44,17 @@ a.nav-item &.is-tab border-bottom: 1px solid transparent border-top: 1px solid transparent - padding-bottom: calc(0.5rem - 1px) + padding-bottom: calc(0.75rem - 1px) padding-left: 1rem padding-right: 1rem - padding-top: calc(0.5rem - 1px) + padding-top: calc(0.75rem - 1px) &:hover border-bottom-color: $primary border-top-color: transparent &.is-active border-bottom: 3px solid $primary color: $primary - padding-bottom: calc(0.5rem - 3px) + padding-bottom: calc(0.75rem - 3px) // Responsiveness +desktop &.is-brand diff --git a/sass/components/pagination.sass b/sass/components/pagination.sass index 3676234d..c0451765 100644 --- a/sass/components/pagination.sass +++ b/sass/components/pagination.sass @@ -46,7 +46,7 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2) .pagination-next, .pagination-link border: 1px solid $pagination-border - min-width: 2.5em + min-width: 2.25em &:hover border-color: $pagination-hover-border color: $pagination-hover diff --git a/sass/elements/button.sass b/sass/elements/button.sass index eb584527..30eb869a 100644 --- a/sass/elements/button.sass +++ b/sass/elements/button.sass @@ -45,9 +45,9 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default width: 1.5em &:first-child:not(:last-child) margin-left: calc(-0.375em - 1px) - margin-right: 0.375em + margin-right: 0.1875em &:last-child:not(:first-child) - margin-left: 0.375em + margin-left: 0.1875em margin-right: calc(-0.375em - 1px) &:first-child:last-child margin-left: calc(-0.375em - 1px) @@ -154,5 +154,9 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default +center(1em) position: absolute !important -button.button +// Adjustment for vertical spacing +button.button, +input[type="submit"].button line-height: 1 + padding-bottom: 0.4em + padding-top: 0.35em diff --git a/sass/elements/form.sass b/sass/elements/form.sass index 97a44d28..e367b69e 100644 --- a/sass/elements/form.sass +++ b/sass/elements/form.sass @@ -158,7 +158,6 @@ $input-radius: $radius !default &.is-#{$name} color: $color -input[type="submit"].input, .select select line-height: 1 diff --git a/sass/utilities/controls.sass b/sass/utilities/controls.sass index dc867b56..10109835 100644 --- a/sass/utilities/controls.sass +++ b/sass/utilities/controls.sass @@ -12,11 +12,11 @@ $control-radius-small: $radius-small !default font-size: $size-normal height: 2.25em justify-content: flex-start - line-height: 1.5 - padding-bottom: 0.425em + line-height: 1.25 + padding-bottom: 0.5em padding-left: 0.625em padding-right: 0.625em - padding-top: 0.325em + padding-top: 0.5em position: relative vertical-align: top // States diff --git a/sass/utilities/mixins.sass b/sass/utilities/mixins.sass index 175c0aef..15bb6c65 100644 --- a/sass/utilities/mixins.sass +++ b/sass/utilities/mixins.sass @@ -167,10 +167,13 @@ // Responsiveness $tablet: 769px !default + // 960px container + 40px $desktop: 1000px !default + // 1152px container + 40 $widescreen: 1192px !default + // 960 and 1152 have been chosen because // they are divisible by both 12 and 16 diff --git a/sass/utilities/variables.sass b/sass/utilities/variables.sass index 1c55ba2d..6269d203 100644 --- a/sass/utilities/variables.sass +++ b/sass/utilities/variables.sass @@ -29,13 +29,13 @@ $red: hsl(348, 100%, 61%) !default $family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default $family-monospace: monospace !default -$size-1: 3.5rem !default -$size-2: 2.75rem !default +$size-1: 3rem !default +$size-2: 2.5rem !default $size-3: 2rem !default $size-4: 1.5rem !default $size-5: 1.25rem !default $size-6: 1rem !default -$size-7: 0.85rem !default +$size-7: 0.75rem !default $weight-light: 300 !default $weight-normal: 400 !default @@ -44,7 +44,7 @@ $weight-bold: 700 !default // Body $body-background: $white !default -$body-size: 14px !default +$body-size: 16px !default // Miscellaneous $easing: ease-out !default