From 77200412924187e8f08dba5f5a3b7b35d29f1cf6 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Sun, 30 Oct 2016 10:41:53 +0000 Subject: [PATCH] Fix button icons --- CHANGELOG.md | 7 + docs/.gitignore | 1 + docs/_config.yml | 1 + docs/_includes/head.html | 2 +- docs/bulma-docs.sass | 30 +- docs/css/bulma-docs.css | 690 ++++++++++++++---------- docs/documentation/elements/button.html | 224 ++++++++ docs/documentation/elements/form.html | 48 +- docs/documentation/elements/tag.html | 40 +- sass/base/generic.sass | 6 +- sass/elements/_all.sass | 1 + sass/elements/button.sass | 65 ++- sass/elements/content.sass | 2 +- sass/elements/form.sass | 6 +- sass/elements/notification.sass | 7 +- sass/elements/other.sass | 55 +- sass/elements/progress.sass | 8 +- sass/elements/tag.sass | 29 + sass/elements/title.sass | 37 +- sass/utilities/controls.sass | 3 +- sass/utilities/functions.sass | 4 +- sass/utilities/mixins.sass | 27 +- sass/utilities/variables.sass | 13 +- 23 files changed, 840 insertions(+), 466 deletions(-) create mode 100644 sass/elements/tag.sass diff --git a/CHANGELOG.md b/CHANGELOG.md index b9720506..03272944 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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 diff --git a/docs/.gitignore b/docs/.gitignore index 9099b667..fb0aa0fd 100644 --- a/docs/.gitignore +++ b/docs/.gitignore @@ -11,5 +11,6 @@ npm-debug.log .sass-cache /_sass /bulma +/fontawesome /styles/node_modules _site diff --git a/docs/_config.yml b/docs/_config.yml index d2700c76..6cb9fd59 100644 --- a/docs/_config.yml +++ b/docs/_config.yml @@ -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 diff --git a/docs/_includes/head.html b/docs/_includes/head.html index ef14384e..feae9596 100644 --- a/docs/_includes/head.html +++ b/docs/_includes/head.html @@ -6,7 +6,7 @@ {% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %} - + diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass index f1994a8f..bce00680 100644 --- a/docs/bulma-docs.sass +++ b/docs/bulma-docs.sass @@ -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 diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index ce6e2a03..357e610d 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -95,7 +95,7 @@ th { html { background-color: whitesmoke; - font-size: 16px; + font-size: 1rem; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; min-width: 300px; @@ -173,7 +173,7 @@ input[type="radio"] { } small { - font-size: 0.875rem; + font-size: 0.75rem; } span { @@ -189,14 +189,14 @@ strong { pre { background-color: whitesmoke; color: #4a4a4a; - font-size: 0.8em; + font-size: 0.75em; white-space: pre; word-wrap: normal; } pre code { - background-color: whitesmoke; - color: #4a4a4a; + background: none; + color: inherit; display: block; font-size: 1em; overflow-x: auto; @@ -579,7 +579,7 @@ a.box:active { border-radius: 3px; box-shadow: none; display: inline-flex; - font-size: 1em; + font-size: 1rem; height: 2.5em; justify-content: flex-start; line-height: 1.5; @@ -592,6 +592,9 @@ a.box:active { -moz-user-select: none; -ms-user-select: none; user-select: none; + background-color: white; + border: 1px solid #dbdbdb; + color: #363636; cursor: pointer; justify-content: center; padding-left: 1em; @@ -612,16 +615,44 @@ a.box:active { color: inherit; } -.button .icon:first-child, -.button .tag:first-child { - margin-left: -2px; - margin-right: 4px; +.button .icon:first-child { + margin-left: calc(-1px - 0.5rem); } -.button .icon:last-child, -.button .tag:last-child { - margin-left: 4px; - margin-right: -2px; +.button .icon:last-child { + margin-right: calc(-1px - 0.5rem); +} + +.button .icon.is-small:first-child { + margin-left: calc(-1px - 0.25rem); +} + +.button .icon.is-small:last-child { + margin-right: calc(-1px - 0.25rem); +} + +.button .icon.is-medium:first-child { + margin-left: calc(-1px - 0.75rem); +} + +.button .icon.is-medium:last-child { + margin-right: calc(-1px - 0.75rem); +} + +.button .icon.is-large:first-child { + margin-left: calc(-1px - 1.25rem); +} + +.button .icon.is-large:last-child { + margin-right: calc(-1px - 1.25rem); +} + +.button .icon:first-child:not(:last-child) { + margin-right: 0.25rem !important; +} + +.button .icon:last-child:not(:first-child) { + margin-left: 0.25rem !important; } .button:hover, .button.is-hovered { @@ -643,7 +674,7 @@ a.box:active { .button.is-link { background-color: transparent; - border-width: 0; + border-color: transparent; color: #4a4a4a; text-decoration: underline; } @@ -655,7 +686,7 @@ a.box:active { .button.is-white { background-color: white; - border-width: 0; + border-color: transparent; color: #0a0a0a; } @@ -706,7 +737,7 @@ a.box:active { .button.is-black { background-color: #0a0a0a; - border-width: 0; + border-color: transparent; color: white; } @@ -757,7 +788,7 @@ a.box:active { .button.is-light { background-color: whitesmoke; - border-width: 0; + border-color: transparent; color: #363636; } @@ -808,7 +839,7 @@ a.box:active { .button.is-dark { background-color: #363636; - border-width: 0; + border-color: transparent; color: whitesmoke; } @@ -859,31 +890,31 @@ a.box:active { .button.is-primary { background-color: #00d1b2; - border-width: 0; - color: white; + border-color: transparent; + color: #fff; } .button.is-primary:hover, .button.is-primary.is-hovered { background-color: #00c4a7; border-color: transparent; - color: white; + color: #fff; } .button.is-primary:focus, .button.is-primary.is-focused { border-color: transparent; box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.5); - color: white; + color: #fff; } .button.is-primary:active, .button.is-primary.is-active { background-color: #00b89c; border-color: transparent; box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2); - color: white; + color: #fff; } .button.is-primary.is-inverted { - background-color: white; + background-color: #fff; color: #00d1b2; } @@ -892,7 +923,7 @@ a.box:active { } .button.is-primary.is-loading:after { - border-color: transparent transparent white white !important; + border-color: transparent transparent #fff #fff !important; } .button.is-primary.is-outlined { @@ -905,36 +936,36 @@ a.box:active { .button.is-primary.is-outlined:hover, .button.is-primary.is-outlined:focus { background-color: #00d1b2; border-color: #00d1b2; - color: white; + color: #fff; } .button.is-info { background-color: #3273dc; - border-width: 0; - color: white; + border-color: transparent; + color: #fff; } .button.is-info:hover, .button.is-info.is-hovered { background-color: #276cda; border-color: transparent; - color: white; + color: #fff; } .button.is-info:focus, .button.is-info.is-focused { border-color: transparent; box-shadow: 0 0 0.5em rgba(50, 115, 220, 0.5); - color: white; + color: #fff; } .button.is-info:active, .button.is-info.is-active { background-color: #2366d1; border-color: transparent; box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2); - color: white; + color: #fff; } .button.is-info.is-inverted { - background-color: white; + background-color: #fff; color: #3273dc; } @@ -943,7 +974,7 @@ a.box:active { } .button.is-info.is-loading:after { - border-color: transparent transparent white white !important; + border-color: transparent transparent #fff #fff !important; } .button.is-info.is-outlined { @@ -956,36 +987,36 @@ a.box:active { .button.is-info.is-outlined:hover, .button.is-info.is-outlined:focus { background-color: #3273dc; border-color: #3273dc; - color: white; + color: #fff; } .button.is-success { background-color: #23d160; - border-width: 0; - color: white; + border-color: transparent; + color: #fff; } .button.is-success:hover, .button.is-success.is-hovered { background-color: #22c65b; border-color: transparent; - color: white; + color: #fff; } .button.is-success:focus, .button.is-success.is-focused { border-color: transparent; box-shadow: 0 0 0.5em rgba(35, 209, 96, 0.5); - color: white; + color: #fff; } .button.is-success:active, .button.is-success.is-active { background-color: #20bc56; border-color: transparent; box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2); - color: white; + color: #fff; } .button.is-success.is-inverted { - background-color: white; + background-color: #fff; color: #23d160; } @@ -994,7 +1025,7 @@ a.box:active { } .button.is-success.is-loading:after { - border-color: transparent transparent white white !important; + border-color: transparent transparent #fff #fff !important; } .button.is-success.is-outlined { @@ -1007,12 +1038,12 @@ a.box:active { .button.is-success.is-outlined:hover, .button.is-success.is-outlined:focus { background-color: #23d160; border-color: #23d160; - color: white; + color: #fff; } .button.is-warning { background-color: #ffdd57; - border-width: 0; + border-color: transparent; color: rgba(0, 0, 0, 0.7); } @@ -1063,31 +1094,31 @@ a.box:active { .button.is-danger { background-color: #ff3860; - border-width: 0; - color: white; + border-color: transparent; + color: #fff; } .button.is-danger:hover, .button.is-danger.is-hovered { background-color: #ff2b56; border-color: transparent; - color: white; + color: #fff; } .button.is-danger:focus, .button.is-danger.is-focused { border-color: transparent; box-shadow: 0 0 0.5em rgba(255, 56, 96, 0.5); - color: white; + color: #fff; } .button.is-danger:active, .button.is-danger.is-active { background-color: #ff1f4b; border-color: transparent; box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2); - color: white; + color: #fff; } .button.is-danger.is-inverted { - background-color: white; + background-color: #fff; color: #ff3860; } @@ -1096,7 +1127,7 @@ a.box:active { } .button.is-danger.is-loading:after { - border-color: transparent transparent white white !important; + border-color: transparent transparent #fff #fff !important; } .button.is-danger.is-outlined { @@ -1109,22 +1140,118 @@ a.box:active { .button.is-danger.is-outlined:hover, .button.is-danger.is-outlined:focus { background-color: #ff3860; border-color: #ff3860; - color: white; + color: #fff; } .button.is-small { border-radius: 2px; - font-size: 0.875rem; + font-size: 0.75rem; +} + +.button.is-small .icon:first-child { + margin-left: calc(-1px - 0.5625rem); +} + +.button.is-small .icon:last-child { + margin-right: calc(-1px - 0.5625rem); +} + +.button.is-small .icon.is-small:first-child { + margin-left: calc(-1px - 0.3125rem); +} + +.button.is-small .icon.is-small:last-child { + margin-right: calc(-1px - 0.3125rem); +} + +.button.is-small .icon.is-medium:first-child { + margin-left: calc(-1px - 0.8125rem); +} + +.button.is-small .icon.is-medium:last-child { + margin-right: calc(-1px - 0.8125rem); +} + +.button.is-small .icon.is-large:first-child { + margin-left: calc(-1px - 1.3125rem); +} + +.button.is-small .icon.is-large:last-child { + margin-right: calc(-1px - 1.3125rem); } .button.is-medium { font-size: 1.25rem; } +.button.is-medium .icon:first-child { + margin-left: calc(-1px - 0.4375rem); +} + +.button.is-medium .icon:last-child { + margin-right: calc(-1px - 0.4375rem); +} + +.button.is-medium .icon.is-small:first-child { + margin-left: calc(-1px - 0.1875rem); +} + +.button.is-medium .icon.is-small:last-child { + margin-right: calc(-1px - 0.1875rem); +} + +.button.is-medium .icon.is-medium:first-child { + margin-left: calc(-1px - 0.6875rem); +} + +.button.is-medium .icon.is-medium:last-child { + margin-right: calc(-1px - 0.6875rem); +} + +.button.is-medium .icon.is-large:first-child { + margin-left: calc(-1px - 1.1875rem); +} + +.button.is-medium .icon.is-large:last-child { + margin-right: calc(-1px - 1.1875rem); +} + .button.is-large { font-size: 1.5rem; } +.button.is-large .icon:first-child { + margin-left: calc(-1px - 0.375rem); +} + +.button.is-large .icon:last-child { + margin-right: calc(-1px - 0.375rem); +} + +.button.is-large .icon.is-small:first-child { + margin-left: calc(-1px - 0.125rem); +} + +.button.is-large .icon.is-small:last-child { + margin-right: calc(-1px - 0.125rem); +} + +.button.is-large .icon.is-medium:first-child { + margin-left: calc(-1px - 0.625rem); +} + +.button.is-large .icon.is-medium:last-child { + margin-right: calc(-1px - 0.625rem); +} + +.button.is-large .icon.is-large:first-child { + margin-left: calc(-1px - 1.125rem); +} + +.button.is-large .icon.is-large:last-child { + margin-right: calc(-1px - 1.125rem); +} + .button[disabled], .button.is-disabled { opacity: 0.5; } @@ -1196,7 +1323,7 @@ a.box:active { .content h5, .content h6 { color: #363636; - font-weight: 300; + font-weight: 400; line-height: 1.125; } @@ -1272,7 +1399,7 @@ a.box:active { } .content.is-small { - font-size: 0.875rem; + font-size: 0.75rem; } .content.is-medium { @@ -1292,7 +1419,7 @@ a.box:active { border-radius: 3px; box-shadow: none; display: inline-flex; - font-size: 1em; + font-size: 1rem; height: 2.5em; justify-content: flex-start; line-height: 1.5; @@ -1422,7 +1549,7 @@ a.box:active { .input.is-small, .textarea.is-small { border-radius: 2px; - font-size: 0.875rem; + font-size: 0.75rem; } .input.is-medium, @@ -1527,7 +1654,7 @@ a.box:active { border-radius: 3px; box-shadow: none; display: inline-flex; - font-size: 1em; + font-size: 1rem; height: 2.5em; justify-content: flex-start; line-height: 1.5; @@ -1598,7 +1725,7 @@ a.box:active { .select.is-small { border-radius: 2px; - font-size: 0.875rem; + font-size: 0.75rem; } .select.is-medium { @@ -1629,7 +1756,7 @@ a.box:active { .help { display: block; - font-size: 0.875em; + font-size: 0.75rem; margin-top: 5px; } @@ -1692,7 +1819,7 @@ a.box:active { } .control:not(:last-child) { - margin-bottom: 10px; + margin-bottom: 0.75rem; } .control.has-addons { @@ -1881,7 +2008,7 @@ a.box:active { .control.is-grouped > .control:not(:last-child) { margin-bottom: 0; - margin-right: 10px; + margin-right: 0.75rem; } .control.is-grouped > .control.is-expanded { @@ -2004,7 +2131,7 @@ a.box:active { .notification { background-color: whitesmoke; border-radius: 3px; - padding: 16px 20px; + padding: 1.25rem 1.5rem; position: relative; } @@ -2020,8 +2147,9 @@ a.box:active { .notification .delete { border-radius: 0 3px; - float: right; - margin: -16px -20px 0 20px; + position: absolute; + right: 0; + top: 0; } .notification .title, @@ -2052,17 +2180,17 @@ a.box:active { .notification.is-primary { background-color: #00d1b2; - color: white; + color: #fff; } .notification.is-info { background-color: #3273dc; - color: white; + color: #fff; } .notification.is-success { background-color: #23d160; - color: white; + color: #fff; } .notification.is-warning { @@ -2072,7 +2200,7 @@ a.box:active { .notification.is-danger { background-color: #ff3860; - color: white; + color: #fff; } .progress { @@ -2081,7 +2209,7 @@ a.box:active { border: none; border-radius: 290486px; display: block; - height: 12px; + height: 1rem; overflow: hidden; padding: 0; width: 100%; @@ -2176,15 +2304,15 @@ a.box:active { } .progress.is-small { - height: 8px; + height: 0.75rem; } .progress.is-medium { - height: 16px; + height: 1.25rem; } .progress.is-large { - height: 20px; + height: 1.5rem; } .table { @@ -2245,7 +2373,7 @@ a.box:active { .table td.is-link > a:hover, .table th.is-link > a:hover { background-color: #00d1b2; - color: white; + color: #fff; } .table td.is-narrow, @@ -2328,9 +2456,82 @@ a.box:active { background-color: whitesmoke; } +.tag { + align-items: center; + background-color: whitesmoke; + border-radius: 290486px; + color: #4a4a4a; + display: inline-flex; + font-size: 0.75rem; + height: 2em; + justify-content: center; + line-height: 1.5; + padding-left: 0.875em; + padding-right: 0.875em; + vertical-align: top; + white-space: nowrap; +} + +.tag .delete { + margin-left: 0.25em; + margin-right: -0.5em; +} + +.tag.is-white { + background-color: white; + color: #0a0a0a; +} + +.tag.is-black { + background-color: #0a0a0a; + color: white; +} + +.tag.is-light { + background-color: whitesmoke; + color: #363636; +} + +.tag.is-dark { + background-color: #363636; + color: whitesmoke; +} + +.tag.is-primary { + background-color: #00d1b2; + color: #fff; +} + +.tag.is-info { + background-color: #3273dc; + color: #fff; +} + +.tag.is-success { + background-color: #23d160; + color: #fff; +} + +.tag.is-warning { + background-color: #ffdd57; + color: rgba(0, 0, 0, 0.7); +} + +.tag.is-danger { + background-color: #ff3860; + color: #fff; +} + +.tag.is-medium { + font-size: 1rem; +} + +.tag.is-large { + font-size: 1.25rem; +} + .title, .subtitle { - font-weight: 300; word-break: break-word; } @@ -2363,7 +2564,8 @@ a.box:active { .title { color: #363636; - font-size: 1.5rem; + font-size: 2rem; + font-weight: 300; line-height: 1.125; } @@ -2384,11 +2586,11 @@ a.box:active { } .title.is-2 { - font-size: 2.5rem; + font-size: 2.75rem; } .title.is-3 { - font-size: 1.75rem; + font-size: 2rem; } .title.is-4 { @@ -2403,17 +2605,10 @@ a.box:active { font-size: 16px; } -.title.is-normal { - font-weight: 400; -} - -.title.is-normal strong { - font-weight: 700; -} - .subtitle { color: #4a4a4a; font-size: 1.25rem; + font-weight: 300; line-height: 1.25; } @@ -2430,11 +2625,11 @@ a.box:active { } .subtitle.is-2 { - font-size: 2.5rem; + font-size: 2.75rem; } .subtitle.is-3 { - font-size: 1.75rem; + font-size: 2rem; } .subtitle.is-4 { @@ -2449,14 +2644,6 @@ a.box:active { font-size: 16px; } -.subtitle.is-normal { - font-weight: 400; -} - -.subtitle.is-normal strong { - font-weight: 700; -} - .block:not(:last-child) { margin-bottom: 1.5rem; } @@ -2478,7 +2665,7 @@ a.box:active { @media screen and (min-width: 1180px) { .container { - max-width: 1200px; + max-width: 1080px; } } @@ -2495,32 +2682,34 @@ a.box:active { border-radius: 290486px; cursor: pointer; display: inline-block; - height: 24px; + font-size: 1rem; + height: 1.5em; outline: none; position: relative; + transform: rotate(45deg); + transform-origin: center center; vertical-align: top; - width: 24px; + width: 1.5em; } .delete:before, .delete: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%); } .delete:before { - transform: rotate(45deg); + height: 2px; + width: 50%; } .delete:after { - transform: rotate(-45deg); + height: 50%; + width: 2px; } .delete:hover { @@ -2528,18 +2717,15 @@ a.box:active { } .delete.is-small { - height: 16px; - width: 16px; + font-size: 0.75rem; } .delete.is-medium { - height: 32px; - width: 32px; + font-size: 1.25rem; } .delete.is-large { - height: 40px; - width: 40px; + font-size: 1.5rem; } .fa { @@ -2551,11 +2737,11 @@ a.box:active { .icon { display: inline-block; font-size: 21px; - height: 24px; - line-height: 24px; + height: 1.5rem; + line-height: 1.5rem; text-align: center; vertical-align: top; - width: 24px; + width: 1.5rem; } .icon .fa { @@ -2566,31 +2752,31 @@ a.box:active { .icon.is-small { display: inline-block; font-size: 14px; - height: 16px; - line-height: 16px; + height: 1rem; + line-height: 1rem; text-align: center; vertical-align: top; - width: 16px; + width: 1rem; } .icon.is-medium { display: inline-block; font-size: 28px; - height: 32px; - line-height: 32px; + height: 2rem; + line-height: 2rem; text-align: center; vertical-align: top; - width: 32px; + width: 2rem; } .icon.is-large { display: inline-block; font-size: 42px; - height: 48px; - line-height: 48px; + height: 3rem; + line-height: 3rem; text-align: center; vertical-align: top; - width: 48px; + width: 3rem; } .heading { @@ -2638,99 +2824,6 @@ a.box:active { vertical-align: top; } -.tag { - align-items: center; - background-color: whitesmoke; - border-radius: 290486px; - color: #4a4a4a; - 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; -} - -.tag .delete { - margin-left: 4px; - margin-right: -6px; -} - -.tag.is-white { - background-color: white; - color: #0a0a0a; -} - -.tag.is-black { - background-color: #0a0a0a; - color: white; -} - -.tag.is-light { - background-color: whitesmoke; - color: #363636; -} - -.tag.is-dark { - background-color: #363636; - color: whitesmoke; -} - -.tag.is-primary { - background-color: #00d1b2; - color: white; -} - -.tag.is-info { - background-color: #3273dc; - color: white; -} - -.tag.is-success { - background-color: #23d160; - color: white; -} - -.tag.is-warning { - background-color: #ffdd57; - color: rgba(0, 0, 0, 0.7); -} - -.tag.is-danger { - background-color: #ff3860; - color: white; -} - -.tag.is-small { - font-size: 0.875rem; - height: 20px; - padding-left: 8px; - padding-right: 8px; -} - -.tag.is-medium { - font-size: 16px; - height: 32px; - padding-left: 14px; - padding-right: 14px; -} - -.tag.is-large { - font-size: 1.25rem; - height: 40px; - line-height: 24px; - padding-left: 18px; - padding-right: 18px; -} - -.tag.is-large .delete { - margin-left: 4px; - margin-right: -8px; -} - .card-header { align-items: stretch; box-shadow: 0 1px 2px rgba(10, 10, 10, 0.1); @@ -3213,7 +3306,7 @@ a.box:active { .menu-list a.is-active { background-color: #00d1b2; - color: white; + color: #fff; } .menu-list li ul { @@ -3224,7 +3317,7 @@ a.box:active { .menu-label { color: #7a7a7a; - font-size: 0.875rem; + font-size: 0.75rem; letter-spacing: 1px; margin-bottom: 5px; text-transform: uppercase; @@ -3247,7 +3340,7 @@ a.box:active { .message-header { background-color: #4a4a4a; border-radius: 3px 3px 0 0; - color: white; + color: #fff; padding: 0.4rem 0.8rem; } @@ -3331,7 +3424,7 @@ a.box:active { .message.is-primary .message-header { background-color: #00d1b2; - color: white; + color: #fff; } .message.is-primary .message-body { @@ -3345,7 +3438,7 @@ a.box:active { .message.is-info .message-header { background-color: #3273dc; - color: white; + color: #fff; } .message.is-info .message-body { @@ -3359,7 +3452,7 @@ a.box:active { .message.is-success .message-header { background-color: #23d160; - color: white; + color: #fff; } .message.is-success .message-body { @@ -3387,7 +3480,7 @@ a.box:active { .message.is-danger .message-header { background-color: #ff3860; - color: white; + color: #fff; } .message.is-danger .message-body { @@ -3435,11 +3528,14 @@ a.box:active { border-radius: 290486px; cursor: pointer; display: inline-block; - height: 24px; + font-size: 1rem; + height: 1.5em; outline: none; position: relative; + transform: rotate(45deg); + transform-origin: center center; vertical-align: top; - width: 24px; + width: 1.5em; background: none; height: 40px; position: fixed; @@ -3452,21 +3548,20 @@ a.box:active { 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%); } .modal-close:before { - transform: rotate(45deg); + height: 2px; + width: 50%; } .modal-close:after { - transform: rotate(-45deg); + height: 50%; + width: 2px; } .modal-close:hover { @@ -3474,18 +3569,15 @@ a.box:active { } .modal-close.is-small { - height: 16px; - width: 16px; + font-size: 0.75rem; } .modal-close.is-medium { - height: 32px; - width: 32px; + font-size: 1.25rem; } .modal-close.is-large { - height: 40px; - width: 40px; + font-size: 1.5rem; } .modal-card { @@ -3885,7 +3977,7 @@ a.nav-item.is-tab.is-active { .panel-tabs { display: flex; - font-size: 0.875rem; + font-size: 0.75rem; padding: 5px 10px 0; justify-content: center; } @@ -4066,7 +4158,7 @@ a.panel-block:hover { .tabs.is-toggle li.is-active a { background-color: #00d1b2; border-color: #00d1b2; - color: white; + color: #fff; z-index: 1; } @@ -4075,7 +4167,7 @@ a.panel-block:hover { } .tabs.is-small { - font-size: 0.875rem; + font-size: 0.75rem; } .tabs.is-small a { @@ -5415,11 +5507,11 @@ a.panel-block:hover { .hero.is-primary { background-color: #00d1b2; - color: white; + color: #fff; } .hero.is-primary .title { - color: white; + color: #fff; } .hero.is-primary .title a, @@ -5433,7 +5525,7 @@ a.panel-block:hover { .hero.is-primary .subtitle a, .hero.is-primary .subtitle strong { - color: white; + color: #fff; } .hero.is-primary .nav { @@ -5454,11 +5546,11 @@ a.panel-block:hover { .hero.is-primary a.nav-item:hover, .hero.is-primary a.nav-item.is-active, .hero.is-primary .nav-item a:not(.button):hover, .hero.is-primary .nav-item a:not(.button).is-active { - color: white; + color: #fff; } .hero.is-primary .tabs a { - color: white; + color: #fff; opacity: 0.9; } @@ -5471,7 +5563,7 @@ a.panel-block:hover { } .hero.is-primary .tabs.is-boxed a, .hero.is-primary .tabs.is-toggle a { - color: white; + color: #fff; } .hero.is-primary .tabs.is-boxed a:hover, .hero.is-primary .tabs.is-toggle a:hover { @@ -5479,8 +5571,8 @@ a.panel-block:hover { } .hero.is-primary .tabs.is-boxed li.is-active a, .hero.is-primary .tabs.is-boxed li.is-active a:hover, .hero.is-primary .tabs.is-toggle li.is-active a, .hero.is-primary .tabs.is-toggle li.is-active a:hover { - background-color: white; - border-color: white; + background-color: #fff; + border-color: #fff; color: #00d1b2; } @@ -5490,13 +5582,13 @@ a.panel-block:hover { @media screen and (max-width: 768px) { .hero.is-primary .nav-toggle span { - background-color: white; + background-color: #fff; } .hero.is-primary .nav-toggle:hover { background-color: rgba(10, 10, 10, 0.1); } .hero.is-primary .nav-toggle.is-active span { - background-color: white; + background-color: #fff; } .hero.is-primary .nav-menu .nav-item { border-top-color: rgba(255, 255, 255, 0.2); @@ -5505,11 +5597,11 @@ a.panel-block:hover { .hero.is-info { background-color: #3273dc; - color: white; + color: #fff; } .hero.is-info .title { - color: white; + color: #fff; } .hero.is-info .title a, @@ -5523,7 +5615,7 @@ a.panel-block:hover { .hero.is-info .subtitle a, .hero.is-info .subtitle strong { - color: white; + color: #fff; } .hero.is-info .nav { @@ -5544,11 +5636,11 @@ a.panel-block:hover { .hero.is-info a.nav-item:hover, .hero.is-info a.nav-item.is-active, .hero.is-info .nav-item a:not(.button):hover, .hero.is-info .nav-item a:not(.button).is-active { - color: white; + color: #fff; } .hero.is-info .tabs a { - color: white; + color: #fff; opacity: 0.9; } @@ -5561,7 +5653,7 @@ a.panel-block:hover { } .hero.is-info .tabs.is-boxed a, .hero.is-info .tabs.is-toggle a { - color: white; + color: #fff; } .hero.is-info .tabs.is-boxed a:hover, .hero.is-info .tabs.is-toggle a:hover { @@ -5569,8 +5661,8 @@ a.panel-block:hover { } .hero.is-info .tabs.is-boxed li.is-active a, .hero.is-info .tabs.is-boxed li.is-active a:hover, .hero.is-info .tabs.is-toggle li.is-active a, .hero.is-info .tabs.is-toggle li.is-active a:hover { - background-color: white; - border-color: white; + background-color: #fff; + border-color: #fff; color: #3273dc; } @@ -5580,13 +5672,13 @@ a.panel-block:hover { @media screen and (max-width: 768px) { .hero.is-info .nav-toggle span { - background-color: white; + background-color: #fff; } .hero.is-info .nav-toggle:hover { background-color: rgba(10, 10, 10, 0.1); } .hero.is-info .nav-toggle.is-active span { - background-color: white; + background-color: #fff; } .hero.is-info .nav-menu .nav-item { border-top-color: rgba(255, 255, 255, 0.2); @@ -5595,11 +5687,11 @@ a.panel-block:hover { .hero.is-success { background-color: #23d160; - color: white; + color: #fff; } .hero.is-success .title { - color: white; + color: #fff; } .hero.is-success .title a, @@ -5613,7 +5705,7 @@ a.panel-block:hover { .hero.is-success .subtitle a, .hero.is-success .subtitle strong { - color: white; + color: #fff; } .hero.is-success .nav { @@ -5634,11 +5726,11 @@ a.panel-block:hover { .hero.is-success a.nav-item:hover, .hero.is-success a.nav-item.is-active, .hero.is-success .nav-item a:not(.button):hover, .hero.is-success .nav-item a:not(.button).is-active { - color: white; + color: #fff; } .hero.is-success .tabs a { - color: white; + color: #fff; opacity: 0.9; } @@ -5651,7 +5743,7 @@ a.panel-block:hover { } .hero.is-success .tabs.is-boxed a, .hero.is-success .tabs.is-toggle a { - color: white; + color: #fff; } .hero.is-success .tabs.is-boxed a:hover, .hero.is-success .tabs.is-toggle a:hover { @@ -5659,8 +5751,8 @@ a.panel-block:hover { } .hero.is-success .tabs.is-boxed li.is-active a, .hero.is-success .tabs.is-boxed li.is-active a:hover, .hero.is-success .tabs.is-toggle li.is-active a, .hero.is-success .tabs.is-toggle li.is-active a:hover { - background-color: white; - border-color: white; + background-color: #fff; + border-color: #fff; color: #23d160; } @@ -5670,13 +5762,13 @@ a.panel-block:hover { @media screen and (max-width: 768px) { .hero.is-success .nav-toggle span { - background-color: white; + background-color: #fff; } .hero.is-success .nav-toggle:hover { background-color: rgba(10, 10, 10, 0.1); } .hero.is-success .nav-toggle.is-active span { - background-color: white; + background-color: #fff; } .hero.is-success .nav-menu .nav-item { border-top-color: rgba(255, 255, 255, 0.2); @@ -5775,11 +5867,11 @@ a.panel-block:hover { .hero.is-danger { background-color: #ff3860; - color: white; + color: #fff; } .hero.is-danger .title { - color: white; + color: #fff; } .hero.is-danger .title a, @@ -5793,7 +5885,7 @@ a.panel-block:hover { .hero.is-danger .subtitle a, .hero.is-danger .subtitle strong { - color: white; + color: #fff; } .hero.is-danger .nav { @@ -5814,11 +5906,11 @@ a.panel-block:hover { .hero.is-danger a.nav-item:hover, .hero.is-danger a.nav-item.is-active, .hero.is-danger .nav-item a:not(.button):hover, .hero.is-danger .nav-item a:not(.button).is-active { - color: white; + color: #fff; } .hero.is-danger .tabs a { - color: white; + color: #fff; opacity: 0.9; } @@ -5831,7 +5923,7 @@ a.panel-block:hover { } .hero.is-danger .tabs.is-boxed a, .hero.is-danger .tabs.is-toggle a { - color: white; + color: #fff; } .hero.is-danger .tabs.is-boxed a:hover, .hero.is-danger .tabs.is-toggle a:hover { @@ -5839,8 +5931,8 @@ a.panel-block:hover { } .hero.is-danger .tabs.is-boxed li.is-active a, .hero.is-danger .tabs.is-boxed li.is-active a:hover, .hero.is-danger .tabs.is-toggle li.is-active a, .hero.is-danger .tabs.is-toggle li.is-active a:hover { - background-color: white; - border-color: white; + background-color: #fff; + border-color: #fff; color: #ff3860; } @@ -5850,13 +5942,13 @@ a.panel-block:hover { @media screen and (max-width: 768px) { .hero.is-danger .nav-toggle span { - background-color: white; + background-color: #fff; } .hero.is-danger .nav-toggle:hover { background-color: rgba(10, 10, 10, 0.1); } .hero.is-danger .nav-toggle.is-active span { - background-color: white; + background-color: #fff; } .hero.is-danger .nav-menu .nav-item { border-top-color: rgba(255, 255, 255, 0.2); @@ -5945,7 +6037,7 @@ body.page-grid .column > .notification { @media screen and (min-width: 769px) { .header-item .button + .button { - margin-left: 10px; + margin-left: 0.75rem; } } @@ -5997,7 +6089,7 @@ svg { } #carbonads .carbon-poweredby { - font-size: 0.875rem; + font-size: 0.75rem; margin-left: 15px; } @@ -6212,7 +6304,7 @@ html.route-index #carbon { background: white; border-radius: 5px; box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); - padding: 20px; + padding: 1.5rem; } #mc_embed_signup .control { @@ -6220,7 +6312,7 @@ html.route-index #carbon { } #mc_embed_signup .notification { - margin-top: 10px; + margin-top: 0.75rem; } #social { @@ -6260,18 +6352,18 @@ html.route-index #carbon { border: 1px solid #ffdd57; border-top-right-radius: 3px; color: rgba(0, 0, 0, 0.7); - padding: 15px 20px; + padding: 1.25rem 1.5rem; position: relative; } .example:not(:first-child), .structure:not(:first-child) { - margin-top: 30px; + margin-top: 2rem; } .example:not(:last-child), .structure:not(:last-child) { - margin-bottom: 20px; + margin-bottom: 1.5rem; } .example:before, @@ -6304,7 +6396,7 @@ html.route-index #carbon { border: 1px solid #ffdd57; border-radius: 0 0 3px 3px; border-top: none; - margin-top: -20px; + margin-top: -1.5rem; } .example + .highlight pre { @@ -6312,18 +6404,18 @@ html.route-index #carbon { } .example + .highlight:not(:last-child) { - margin-bottom: 40px; + margin-bottom: 3rem; } .structure { border-color: #ff3860; border-radius: 3px; - padding: 20px; + padding: 1.5rem; } .structure:before { background: #ff3860; - color: white; + color: #fff; content: "Structure"; } @@ -6362,13 +6454,13 @@ html.route-index #carbon { } .structure-item.is-structure-container { - padding: 20px 10px 10px; + padding: 1.5rem 0.75rem 0.75rem; } .structure-item.is-structure-container:after { align-items: flex-start; justify-content: flex-start; - padding: 5px 10px; + padding: 0.5rem 0.75rem; } .highlight { @@ -6406,12 +6498,12 @@ html.route-index #carbon { @media screen and (min-width: 769px) { .section:not(.is-fullwidth) > .example:not(.is-fullwidth) { - margin-left: 20px; - margin-right: 20px; + margin-left: 1.5rem; + margin-right: 1.5rem; } .section:not(.is-fullwidth) > .example:not(.is-fullwidth) + .highlight { - margin-left: 20px; - margin-right: 20px; + margin-left: 1.5rem; + margin-right: 1.5rem; } } @@ -6439,10 +6531,10 @@ html.route-index #carbon { html ::-moz-selection { background: #00d1b2; - color: white; + color: #fff; } html ::selection { background: #00d1b2; - color: white; + color: #fff; } diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html index 6fce3dcb..c7f6266b 100644 --- a/docs/documentation/elements/button.html +++ b/docs/documentation/elements/button.html @@ -256,6 +256,23 @@ doc-subtab: button
+

+ + + + + + + + + + + + + + + +

@@ -345,6 +362,140 @@ doc-subtab: button

+
+
+
+

+ New! +

+

+ If the button only contains an icon, Bulma will make sure the button remains square, no matter the size of the button or of the icon. +

+
+ +

+ + + + + +

+

+ + + + + + + + + + +

+

+ + + + + + + + + + + + + + + +

+

+ + + + + + + + + + + + + + + + + + + + +

+
+
+{% highlight html %} +

+ + + + + +

+

+ + + + + + + + + + +

+

+ + + + + + + + + + + + + + + +

+

+ + + + + + + + + + + + + + + + + + + + +

+{% endhighlight %} +
+
+

Button group

@@ -439,6 +590,79 @@ doc-subtab: button Right

+{% endhighlight %} + +
+ +

Button group with addons

+
+

You can group together addons as well:

+
+
+
+

+ + + + + Bold + + + + + + Italic + + + + + + Underline + +

+

+ + + + + Left + + + + + + Center + + + + + + Right + +

+
+
+{% highlight html %} +

+ + + + + Left + + + + + + Center + + + + + + Right + +

{% endhighlight %} diff --git a/docs/documentation/elements/form.html b/docs/documentation/elements/form.html index f344e56a..efed508d 100644 --- a/docs/documentation/elements/form.html +++ b/docs/documentation/elements/form.html @@ -77,10 +77,14 @@ doc-subtab: form No

-

- - -

+
+

+ +

+

+ +

+
{% highlight html %} @@ -129,10 +133,14 @@ doc-subtab: form No

-

- - -

+
+

+ +

+

+ +

+
{% endhighlight %}
@@ -363,10 +371,14 @@ doc-subtab: form No

-

- - -

+
+

+ +

+

+ +

+
{% highlight html %} @@ -392,10 +404,14 @@ doc-subtab: form No

-

- - -

+
+

+ +

+

+ +

+
{% endhighlight %}
diff --git a/docs/documentation/elements/tag.html b/docs/documentation/elements/tag.html index 8335fc53..aa69c481 100644 --- a/docs/documentation/elements/tag.html +++ b/docs/documentation/elements/tag.html @@ -17,7 +17,7 @@ doc-subtab: tag
- By default, a tag is a 24px high label. + By default, a tag is a 1.5rem high label.
@@ -35,14 +35,29 @@ doc-subtab: tag
- There are 6 different colors available. + Like with buttons, there are 9 different colors available.
+

+ + Black + +

Dark

+

+ + Light + +

+

+ + White + +

Primary @@ -69,7 +84,10 @@ doc-subtab: tag

{% highlight html %} +Black Dark +Light +White Primary Info Success @@ -81,14 +99,9 @@ doc-subtab: tag
- 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