From 4413d760e97eaa446139c74d80b2993bf6b2ec3e Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Sun, 14 Feb 2016 22:10:05 +0000 Subject: [PATCH] Add modals, Add block, Add has modifier --- bulma/base/content.sass | 3 +-- bulma/base/generic.sass | 7 +++++-- bulma/base/helpers.sass | 29 +++++++++++++++----------- bulma/components/components.sass | 4 +--- bulma/components/media.sass | 29 +++----------------------- bulma/components/modal.sass | 34 +++++++++++++++++++++++++++++++ bulma/components/navbar.sass | 3 +-- bulma/components/tabs.sass | 3 +-- bulma/elements/controls.sass | 2 +- bulma/elements/elements.sass | 30 +++++++++++++++++---------- bulma/elements/messages.sass | 3 +-- bulma/elements/notifications.sass | 7 +++++-- bulma/elements/titles.sass | 4 +--- bulma/layout/section.sass | 3 ++- 14 files changed, 92 insertions(+), 69 deletions(-) create mode 100644 bulma/components/modal.sass diff --git a/bulma/base/content.sass b/bulma/base/content.sass index 1807c605..d479e5f6 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 1305a80a..ead77843 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 4182ce75..b0d6eb14 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 77ecadcc..7a3bb6a8 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 bf275eb0..d6cdae3f 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 00000000..89e09fd2 --- /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 153f93c8..a1b36b0a 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 90afd85e..02218cc1 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 0bc84e47..f4ca31bb 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 eba8de61..078d674a 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 0d239db6..f46e2de7 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 28bdf3b6..67c424b0 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 ded99d1c..8c6edab0 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 0fce721a..86bbe85f 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