From: Jeremy Thomas Date: Mon, 11 Apr 2016 21:51:11 +0000 (+0100) Subject: Improve tiles X-Git-Tag: 0.0.19~1 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=4cfb9341df123ecd26f1ce6013e7b9c5c722acb2;p=thirdparty%2Fbulma.git Improve tiles --- diff --git a/CHANGELOG.md b/CHANGELOG.md index e7b0ecf41..fd4c0e84e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,21 @@ # Bulma Changelog +## 0.0.19 + +### BREAKING + +* `.is-third` renamed to `.is-one-third` +* `.is-quarter` renamed to `.is-one-quarter` + +### Added + +* `.is-two-thirds` +* `.is-three-quarters` + +### Changed + +* `.delete` in `.tag` has no red + ## 0.0.18 ### BREAKING diff --git a/bulma/components/grid.sass b/bulma/components/grid.sass index ae018f90b..3d3ea0081 100644 --- a/bulma/components/grid.sass +++ b/bulma/components/grid.sass @@ -4,20 +4,30 @@ .columns.is-mobile > &.is-full flex: none width: 100% + .columns.is-mobile > &.is-three-quarters + flex: none + width: 75% + .columns.is-mobile > &.is-two-thirds + flex: none + width: 66.6666% .columns.is-mobile > &.is-half flex: none width: 50% - .columns.is-mobile > &.is-third + .columns.is-mobile > &.is-one-third flex: none width: 33.3333% - .columns.is-mobile > &.is-quarter + .columns.is-mobile > &.is-one-quarter flex: none width: 25% + .columns.is-mobile > &.is-offset-three-quarters + margin-left: 75% + .columns.is-mobile > &.is-offset-two-thirds + margin-left: 66.6666% .columns.is-mobile > &.is-offset-half margin-left: 50% - .columns.is-mobile > &.is-offset-third + .columns.is-mobile > &.is-offset-one-third margin-left: 33.3333% - .columns.is-mobile > &.is-offset-quarter + .columns.is-mobile > &.is-offset-one-quarter margin-left: 25% @for $i from 1 through 12 .columns.is-mobile > &.is-#{$i} @@ -29,20 +39,30 @@ &.is-full-mobile flex: none width: 100% + &.is-three-quarters-mobile + flex: none + width: 75% + &.is-two-thirds-mobile + flex: none + width: 66.6666% &.is-half-mobile flex: none width: 50% - &.is-third-mobile + &.is-one-third-mobile flex: none width: 33.3333% - &.is-quarter-mobile + &.is-one-quarter-mobile flex: none width: 25% + &.is-offset-three-quarters-mobile + margin-left: 75% + &.is-offset-two-thirds-mobile + margin-left: 66.6666% &.is-offset-half-mobile margin-left: 50% - &.is-offset-third-mobile + &.is-offset-one-third-mobile margin-left: 33.3333% - &.is-offset-quarter-mobile + &.is-offset-one-quarter-mobile margin-left: 25% @for $i from 1 through 12 &.is-#{$i}-mobile @@ -55,26 +75,40 @@ &.is-full-tablet flex: none width: 100% + &.is-three-quarters, + &.is-three-quarters-tablet + flex: none + width: 75% + &.is-two-thirds, + &.is-two-thirds-tablet + flex: none + width: 66.6666% &.is-half, &.is-half-tablet flex: none width: 50% - &.is-third, - &.is-third-tablet + &.is-one-third, + &.is-one-third-tablet flex: none width: 33.3333% - &.is-quarter, - &.is-quarter-tablet + &.is-one-quarter, + &.is-one-quarter-tablet flex: none width: 25% + &.is-offset-three-quarters, + &.is-offset-three-quarters-tablet + margin-left: 75% + &.is-offset-two-thirds, + &.is-offset-two-thirds-tablet + margin-left: 66.6666% &.is-offset-half, &.is-offset-half-tablet margin-left: 50% - &.is-offset-third, - &.is-offset-third-tablet + &.is-offset-one-third, + &.is-offset-one-third-tablet margin-left: 33.3333% - &.is-offset-quarter, - &.is-offset-quarter-tablet + &.is-offset-one-quarter, + &.is-offset-one-quarter-tablet margin-left: 25% @for $i from 1 through 12 &.is-#{$i}, @@ -88,20 +122,30 @@ &.is-full-desktop flex: none width: 100% + &.is-three-quarters-desktop + flex: none + width: 75% + &.is-two-thirds-desktop + flex: none + width: 66.6666% &.is-half-desktop flex: none width: 50% - &.is-third-desktop + &.is-one-third-desktop flex: none width: 33.3333% - &.is-quarter-desktop + &.is-one-quarter-desktop flex: none width: 25% + &.is-offset-three-quarters-desktop + margin-left: 75% + &.is-offset-two-thirds-desktop + margin-left: 66.6666% &.is-offset-half-desktop margin-left: 50% - &.is-offset-third-desktop + &.is-offset-one-third-desktop margin-left: 33.3333% - &.is-offset-quarter-desktop + &.is-offset-one-quarter-desktop margin-left: 25% @for $i from 1 through 12 &.is-#{$i}-desktop @@ -158,7 +202,7 @@ &.is-desktop display: flex -.tile +.tilefiejsoif flex: 1 // Modifiers &.is-parent @@ -171,8 +215,9 @@ flex: none width: ($i / 12) * 100% -.tiles +.tile align-items: stretch + flex: 1 // Modifiers &.is-ancestor margin-left: -10px @@ -183,12 +228,17 @@ &:not(:last-child) margin-bottom: 10px &.is-child - flex: 1 margin: 0 !important + &.is-parent + padding: 10px &.is-vertical flex-direction: column - & > .tiles.is-child:not(:last-child) + & > .tile.is-child:not(:last-child) margin-bottom: 20px !important // Responsiveness +tablet display: flex + @for $i from 1 through 12 + &.is-#{$i} + flex: none + width: ($i / 12) * 100% diff --git a/bulma/elements/elements.sass b/bulma/elements/elements.sass index 4d13cf24e..437ab9996 100644 --- a/bulma/elements/elements.sass +++ b/bulma/elements/elements.sass @@ -38,7 +38,7 @@ &:after transform: rotate(-45deg) &:hover - background: $red + background: rgba(black, 0.5) // Sizes &.is-small height: 16px diff --git a/bulma/elements/notifications.sass b/bulma/elements/notifications.sass index e9edfba07..423be80ef 100644 --- a/bulma/elements/notifications.sass +++ b/bulma/elements/notifications.sass @@ -6,12 +6,9 @@ padding: 16px 20px position: relative .delete - background: rgba(black, 0.2) border-radius: 0 $radius float: right margin: -16px -20px 0 20px - &:hover - background: rgba(black, 0.5) .title color: inherit // Colors diff --git a/bulma/elements/titles.sass b/bulma/elements/titles.sass index 617a8a71e..324b9e837 100644 --- a/bulma/elements/titles.sass +++ b/bulma/elements/titles.sass @@ -2,6 +2,7 @@ .subtitle @extend .block font-weight: $weight-title-normal + word-break: break-all em, span font-weight: $weight-title-normal