From d7f34c9d0daf9fe5230420521c009e16c1c839e7 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Sat, 24 Sep 2016 18:56:26 +0100 Subject: [PATCH] Fix docs mobile version --- CHANGELOG.md | 6 +++++ docs/_includes/footer.html | 1 + docs/bulma-docs.sass | 20 +++++++------- docs/css/bulma-docs.css | 54 ++++++++++++++++++++++---------------- docs/index.html | 6 ++--- sass/components/media.sass | 12 +++++---- sass/components/nav.sass | 2 ++ sass/layout/hero.sass | 2 +- 8 files changed, 63 insertions(+), 40 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4e2559f6..5faf1179 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Bulma Changelog +## 0.2.1 + +* Fix: container flex +* Fix: nav-item flex +* Fix: media-number flex + ## 0.2.0 * Added: new branding diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html index 9fe04b9d..bcc41852 100644 --- a/docs/_includes/footer.html +++ b/docs/_includes/footer.html @@ -75,6 +75,7 @@ .title.is-2 a { color: #242424; padding-left: 60px; + position: relative; } .title.is-2 a:hover { diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass index c6f05731..c864e9dd 100644 --- a/docs/bulma-docs.sass +++ b/docs/bulma-docs.sass @@ -4,7 +4,6 @@ @import "../sass/utilities/mixins.sass" // Override - .button +tablet small @@ -25,13 +24,15 @@ body.page-grid .column > .notification margin-left: 10px // Additional +svg + max-height: 100% + max-width: 100% $carbon-space: 15px #carbon max-width: 340px min-height: 100px + ($carbon-space * 2) - min-width: 300px padding: $carbon-space +tablet margin-left: auto @@ -137,7 +138,7 @@ $curve: cubic-bezier(0, 0.71, 0.29, 1) animation-fill-mode: both animation-name: floatUp animation-timing-function: $curve - border-radius: 20px + border-radius: 24px display: inline-block height: 240px margin-bottom: 40px @@ -173,9 +174,9 @@ $curve: cubic-bezier(0, 0.71, 0.29, 1) fill: $turquoise +mobile - border-radius: 10px - height: 120px - width: 120px + border-radius: 16px + height: 160px + width: 160px #bulma animation: slideDown 500ms both @@ -232,7 +233,7 @@ html.route-index #carbon #social align-items: center display: flex - height: 20px + flex-wrap: wrap margin-bottom: 1em justify-content: center a @@ -240,8 +241,9 @@ html.route-index #carbon font-size: 11px height: 20px line-height: 20px - iframe:last-child - margin-left: 10px + margin: 5px + iframe + margin: 5px #images tr diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index c9254221..7b670590 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -3415,6 +3415,16 @@ a.box:active { } } +.media-number, +.media-left, +.media-right { + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + .media-number { background-color: whitesmoke; border-radius: 290486px; @@ -3422,24 +3432,13 @@ a.box:active { font-size: 18px; height: 32px; line-height: 24px; + margin-right: 10px; min-width: 32px; padding: 4px 8px; text-align: center; vertical-align: top; } -@media screen and (max-width: 768px) { - .media-number { - margin-bottom: 10px; - } -} - -@media screen and (min-width: 769px) { - .media-number { - margin-right: 10px; - } -} - .media-left { margin-right: 10px; } @@ -3998,6 +3997,11 @@ a.box:active { display: -webkit-box; display: -ms-flexbox; display: flex; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -ms-flex-negative: 0; + flex-shrink: 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; @@ -6708,8 +6712,8 @@ a.panel-block:hover { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; - -ms-flex-negative: 0; - flex-shrink: 0; + -ms-flex-negative: 1; + flex-shrink: 1; } @keyframes spin-around { @@ -6792,10 +6796,14 @@ body.page-grid .column > .notification { } } +svg { + max-height: 100%; + max-width: 100%; +} + #carbon { max-width: 340px; min-height: 130px; - min-width: 300px; padding: 15px; } @@ -7041,7 +7049,7 @@ body.page-grid .column > .notification { animation-name: floatUp; -webkit-animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1); animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1); - border-radius: 20px; + border-radius: 24px; display: inline-block; height: 240px; margin-bottom: 40px; @@ -7106,9 +7114,9 @@ body.page-grid .column > .notification { @media screen and (max-width: 768px) { #b { - border-radius: 10px; - height: 120px; - width: 120px; + border-radius: 16px; + height: 160px; + width: 160px; } } @@ -7195,7 +7203,8 @@ html.route-index #carbon { display: -webkit-box; display: -ms-flexbox; display: flex; - height: 20px; + -ms-flex-wrap: wrap; + flex-wrap: wrap; margin-bottom: 1em; -webkit-box-pack: center; -ms-flex-pack: center; @@ -7207,10 +7216,11 @@ html.route-index #carbon { font-size: 11px; height: 20px; line-height: 20px; + margin: 5px; } -#social iframe:last-child { - margin-left: 10px; +#social iframe { + margin: 5px; } #images tr td:nth-child(2) { diff --git a/docs/index.html b/docs/index.html index 609a6927..1df4e1d6 100644 --- a/docs/index.html +++ b/docs/index.html @@ -405,10 +405,10 @@ route: index

- - - + + + Easy vertical centering in fullscreen

diff --git a/sass/components/media.sass b/sass/components/media.sass index aa72b44e..4db2866a 100644 --- a/sass/components/media.sass +++ b/sass/components/media.sass @@ -1,6 +1,12 @@ @import "../utilities/mixins.sass" @import "../utilities/variables.sass" +.media-number, +.media-left, +.media-right + flex-grow: 0 + flex-shrink: 0 + .media-number background-color: $background border-radius: 290486px @@ -8,15 +14,11 @@ font-size: $size-medium height: 32px line-height: 24px + margin-right: 10px min-width: 32px padding: 4px 8px text-align: center vertical-align: top - // Responsiveness - +mobile - margin-bottom: 10px - +tablet - margin-right: 10px .media-left margin-right: 10px diff --git a/sass/components/nav.sass b/sass/components/nav.sass index a1198c08..d5907006 100644 --- a/sass/components/nav.sass +++ b/sass/components/nav.sass @@ -14,6 +14,8 @@ $nav-height: 50px !default .nav-item align-items: center display: flex + flex-grow: 0 + flex-shrink: 0 justify-content: center padding: 10px a diff --git a/sass/layout/hero.sass b/sass/layout/hero.sass index af934fc1..ef3446a4 100644 --- a/sass/layout/hero.sass +++ b/sass/layout/hero.sass @@ -148,4 +148,4 @@ display: flex & > .container flex-grow: 1 - flex-shrink: 0 + flex-shrink: 1