From: Jeremy Thomas Date: Sun, 14 Feb 2016 22:10:05 +0000 (+0000) Subject: Add modals, Add block, Add has modifier X-Git-Tag: 0.0.14~1 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=4413d760e97eaa446139c74d80b2993bf6b2ec3e;p=thirdparty%2Fbulma.git Add modals, Add block, Add has modifier --- diff --git a/bulma/base/content.sass b/bulma/base/content.sass index 1807c6050..d479e5f65 100644 --- a/bulma/base/content.sass +++ b/bulma/base/content.sass @@ -1,4 +1,5 @@ .content + @extend .block &.is-medium font-size: $size-5 code @@ -7,8 +8,6 @@ font-size: $size-4 code font-size: $size-5 - &:not(:last-child) - margin-bottom: 20px h1, h2, h3, diff --git a/bulma/base/generic.sass b/bulma/base/generic.sass index 1305a80ad..ead778437 100644 --- a/bulma/base/generic.sass +++ b/bulma/base/generic.sass @@ -7,6 +7,8 @@ html overflow-x: hidden overflow-y: scroll text-rendering: optimizeLegibility + &.has-modal-open + overflow: hidden body, button, @@ -47,7 +49,6 @@ hr margin: 20px 0 img - max-height: 100% max-width: 100% input[type="checkbox"], @@ -90,8 +91,10 @@ table th color: $text-strong +.block:not(:last-child) + margin-bottom: 20px + .container - margin: 0 20px position: relative +desktop margin: 0 auto diff --git a/bulma/base/helpers.sass b/bulma/base/helpers.sass index 4182ce75d..b0d6eb14a 100644 --- a/bulma/base/helpers.sass +++ b/bulma/base/helpers.sass @@ -1,14 +1,3 @@ -// Alignment - -.is-centered - text-align: center - -.is-left - text-align: left - -.is-right - text-align: right - // Display .is-block @@ -20,7 +9,7 @@ .is-flex display: flex -// Pull +// Float .is-clearfix +clearfix @@ -31,11 +20,27 @@ .is-pulled-right float: right +// Overlay + +.is-overlay + +overlay + // Size .is-fullwidth width: 100% +// Text + +.is-text-centered + text-align: center + +.is-text-left + text-align: left + +.is-text-right + text-align: right + // Visibility .is-hidden-mobile diff --git a/bulma/components/components.sass b/bulma/components/components.sass index 77ecadcc9..7a3bb6a8a 100644 --- a/bulma/components/components.sass +++ b/bulma/components/components.sass @@ -7,6 +7,4 @@ @import "tabs" @import "media" @import "menu" - -.block:not(:last-child) - margin-bottom: 20px +@import "modal" diff --git a/bulma/components/media.sass b/bulma/components/media.sass index bf275eb0a..d6cdae3f0 100644 --- a/bulma/components/media.sass +++ b/bulma/components/media.sass @@ -1,14 +1,3 @@ -.media-image - &.is-32 - width: 32px - &.is-40 - width: 40px - +mobile - margin-bottom: 10px - +tablet - margin-right: 10px - width: 60px - .media-number background: $background border-radius: 290486px @@ -26,25 +15,18 @@ margin-right: 10px .media-left - +mobile - margin-bottom: 20px - +tablet - margin-right: 20px + margin-right: 10px .media-right - +mobile - margin-top: 20px - +tablet - margin-left: 20px + margin-left: 10px .media-content flex: 1 text-align: left - .textarea - min-height: 60px .media align-items: flex-start + display: flex text-align: left .content:not(:last-child) margin-bottom: 10px @@ -52,10 +34,6 @@ border-top: 1px solid rgba($border, 0.5) display: flex padding-top: 10px - .media-image - margin-bottom: 0 - margin-right: 10px - width: 40px .textarea +control-small .button @@ -77,7 +55,6 @@ margin-top: 20px padding-top: 20px +tablet - display: flex &.is-large .media-number margin-right: 20px diff --git a/bulma/components/modal.sass b/bulma/components/modal.sass new file mode 100644 index 000000000..89e09fd22 --- /dev/null +++ b/bulma/components/modal.sass @@ -0,0 +1,34 @@ +.modal-background + +overlay + background: rgba(black, 0.86) + +.modal-content + margin: 0 20px + max-height: calc(100vh - 160px) + overflow: auto + position: relative + width: 100% + +tablet + margin: 0 auto + max-height: calc(100vh - 40px) + width: 640px + +.modal-close + @extend .delete + background: none + height: 40px + position: fixed + right: 20px + top: 20px + width: 40px + +.modal + +overlay + align-items: center + display: none + justify-content: center + overflow: hidden + position: fixed + z-index: 1986 + &.is-active + display: flex diff --git a/bulma/components/navbar.sass b/bulma/components/navbar.sass index 153f93c8a..a1b36b0a5 100644 --- a/bulma/components/navbar.sass +++ b/bulma/components/navbar.sass @@ -7,8 +7,7 @@ margin-bottom: 10px .navbar - &:not(:last-child) - margin-bottom: 20px + @extend .block code border-radius: $radius img diff --git a/bulma/components/tabs.sass b/bulma/components/tabs.sass index 90afd85e2..02218cc11 100644 --- a/bulma/components/tabs.sass +++ b/bulma/components/tabs.sass @@ -1,10 +1,9 @@ .tabs + @extend .block line-height: 24px overflow: hidden overflow-x: auto white-space: nowrap - &:not(:last-child) - margin-bottom: 20px .fa font-size: 14px line-height: 20px diff --git a/bulma/elements/controls.sass b/bulma/elements/controls.sass index 0bc84e477..f4ca31bb0 100644 --- a/bulma/elements/controls.sass +++ b/bulma/elements/controls.sass @@ -182,7 +182,7 @@ top: 8px &:not(:last-child) margin-bottom: 10px - &.is-withicon + &.has-icon & > .fa +fa(14px, 20px) color: $text-light diff --git a/bulma/elements/elements.sass b/bulma/elements/elements.sass index eba8de611..078d674a9 100644 --- a/bulma/elements/elements.sass +++ b/bulma/elements/elements.sass @@ -7,6 +7,12 @@ @import "messages" @import "notifications" +.box + background: white + border-radius: 5px + box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1) + padding: 20px + .delete +unselectable -moz-appearance: none @@ -26,24 +32,27 @@ content: "" display: block height: 2px - left: 6px + left: 50% + margin-left: -25% + margin-top: -1px position: absolute - top: 11px - width: 12px + top: 50% + width: 50% &:before transform: rotate(45deg) &:after transform: rotate(-45deg) &:hover - background: rgba(black, 0.5) + background: $red &.is-small height: 16px width: 16px - &:before, - &:after - left: 4px - top: 7px - width: 8px + &.is-medium + height: 32px + width: 32px + &.is-large + height: 40px + width: 40px .icon +fa(21px, 24px) @@ -107,13 +116,12 @@ text-transform: uppercase .highlight + @extend .block font-size: 12px font-weight: normal max-width: 100% overflow: hidden padding: 0 - &:not(:last-child) - margin-bottom: 20px pre overflow: auto max-width: 100% diff --git a/bulma/elements/messages.sass b/bulma/elements/messages.sass index 0d239db61..f46e2de7d 100644 --- a/bulma/elements/messages.sass +++ b/bulma/elements/messages.sass @@ -19,10 +19,9 @@ border-top: none .message + @extend .block background: $background border-radius: $radius - &:not(:last-child) - margin-bottom: 20px @each $name, $pair in $colors $color: nth($pair, 1) $color-invert: nth($pair, 2) diff --git a/bulma/elements/notifications.sass b/bulma/elements/notifications.sass index 28bdf3b67..67c424b0c 100644 --- a/bulma/elements/notifications.sass +++ b/bulma/elements/notifications.sass @@ -1,11 +1,10 @@ .notification + @extend .block +clearfix background: $background border-radius: $radius padding: 16px 20px position: relative - &:not(:last-child) - margin-bottom: 20px .title color: inherit @each $name, $pair in $colors @@ -15,6 +14,10 @@ background: $color color: $color-invert .delete + background: rgba(black, 0.2) border-radius: 0 $radius float: right margin: -16px -20px 0 20px + &:hover + background: rgba(black, 0.5) + diff --git a/bulma/elements/titles.sass b/bulma/elements/titles.sass index ded99d1c0..8c6edab07 100644 --- a/bulma/elements/titles.sass +++ b/bulma/elements/titles.sass @@ -1,12 +1,10 @@ .title, .subtitle + @extend .block font-weight: 300 - &:not(:last-child) - margin-bottom: 20px a &:hover border-bottom: 1px solid - // text-decoration: underline .title color: $text-strong diff --git a/bulma/layout/section.sass b/bulma/layout/section.sass index 0fce721a2..86bbe85f9 100644 --- a/bulma/layout/section.sass +++ b/bulma/layout/section.sass @@ -1,9 +1,10 @@ .section background: white - padding: 40px 0 + padding: 40px 20px & + .section border-top: 1px solid rgba($border, 0.5) +desktop + padding: 40px 0 &.is-medium padding: 120px 0 &.is-large