From 04f8c285b1833e5b4484ff8780caf587216979ec Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Sat, 13 Feb 2016 18:59:09 +0000 Subject: [PATCH] Fix imports, Add images, Add fluid container --- bulma/base/base.sass | 8 ++++---- bulma/base/generic.sass | 9 +++++++-- bulma/components/components.sass | 14 +++++++------- bulma/components/table.sass | 3 +++ bulma/config/variables.sass | 1 - bulma/elements/elements.sass | 11 ++++++----- bulma/elements/images.sass | 32 ++++++++++++++++++++++++++++++++ bulma/elements/titles.sass | 4 ++++ bulma/layout/hero.sass | 3 +++ bulma/layout/layout.sass | 8 ++++---- bulma/layout/section.sass | 3 +-- bulma/utilities/mixins.sass | 5 +++++ bulma/utilities/utilities.sass | 8 ++++---- 13 files changed, 80 insertions(+), 29 deletions(-) create mode 100644 bulma/elements/images.sass diff --git a/bulma/base/base.sass b/bulma/base/base.sass index 2f28f89d..74209c01 100644 --- a/bulma/base/base.sass +++ b/bulma/base/base.sass @@ -1,6 +1,6 @@ @charset "utf-8" -@import generic -@import content -@import highlight -@import helpers +@import "generic" +@import "content" +@import "highlight" +@import "helpers" diff --git a/bulma/base/generic.sass b/bulma/base/generic.sass index b2c7e36f..1305a80a 100644 --- a/bulma/base/generic.sass +++ b/bulma/base/generic.sass @@ -91,9 +91,14 @@ table color: $text-strong .container - margin: 0 auto - max-width: 960px + margin: 0 20px position: relative + +desktop + margin: 0 auto + max-width: 960px + &.is-fluid + margin: 0 20px + max-width: none .fa font-size: 21px diff --git a/bulma/components/components.sass b/bulma/components/components.sass index 224dd6ba..77ecadcc 100644 --- a/bulma/components/components.sass +++ b/bulma/components/components.sass @@ -1,12 +1,12 @@ @charset "utf-8" -@import grid -@import navbar -@import card -@import table -@import tabs -@import media -@import menu +@import "grid" +@import "navbar" +@import "card" +@import "table" +@import "tabs" +@import "media" +@import "menu" .block:not(:last-child) margin-bottom: 20px diff --git a/bulma/components/table.sass b/bulma/components/table.sass index 52605175..b249e98a 100644 --- a/bulma/components/table.sass +++ b/bulma/components/table.sass @@ -9,6 +9,9 @@ border-width: 0 0 1px padding: 8px 10px vertical-align: top + &.table-narrow + white-space: nowrap + width: 1% &.table-link padding: 0 & > a diff --git a/bulma/config/variables.sass b/bulma/config/variables.sass index d4888aa6..e118e8c8 100644 --- a/bulma/config/variables.sass +++ b/bulma/config/variables.sass @@ -4,7 +4,6 @@ $grey-darker: #222324 $grey-dark: #69707a $grey: #aeb1b5 $grey-light: #d3d6db -$grey-lighter: #ebeff5 $grey-lighter: #f5f7fa $blue: #42afe3 diff --git a/bulma/elements/elements.sass b/bulma/elements/elements.sass index 9282ccc2..eba8de61 100644 --- a/bulma/elements/elements.sass +++ b/bulma/elements/elements.sass @@ -1,10 +1,11 @@ @charset "utf-8" -@import controls -@import buttons -@import titles -@import messages -@import notifications +@import "controls" +@import "buttons" +@import "titles" +@import "images" +@import "messages" +@import "notifications" .delete +unselectable diff --git a/bulma/elements/images.sass b/bulma/elements/images.sass new file mode 100644 index 00000000..f5ff36e6 --- /dev/null +++ b/bulma/elements/images.sass @@ -0,0 +1,32 @@ +$dimensions: 16 24 32 48 64 96 128 + +.image + display: block + position: relative + img + display: block + &.is-square, + &.is-1by1, + &.is-4by3, + &.is-3by2, + &.is-16by9, + &.is-2by1 + img + +overlay + height: 100% + width: 100% + &.is-square, + &.is-1by1 + padding-top: 100% + &.is-4by3 + padding-top: 75% + &.is-3by2 + padding-top: 66.6666% + &.is-16by9 + padding-top: 56.25% + &.is-2by1 + padding-top: 50% + @each $dimension in $dimensions + &.is-#{$dimension}x#{$dimension} + height: $dimension * 1px + width: $dimension * 1px diff --git a/bulma/elements/titles.sass b/bulma/elements/titles.sass index b7ccb058..ded99d1c 100644 --- a/bulma/elements/titles.sass +++ b/bulma/elements/titles.sass @@ -3,6 +3,10 @@ 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/hero.sass b/bulma/layout/hero.sass index 6ccaae05..c8800752 100644 --- a/bulma/layout/hero.sass +++ b/bulma/layout/hero.sass @@ -42,6 +42,9 @@ border: none ul border-bottom: none + &.is-boxed + a + padding: 8px 15px &.is-alt background: $background color: $text-light diff --git a/bulma/layout/layout.sass b/bulma/layout/layout.sass index 81038f42..bce1c34e 100644 --- a/bulma/layout/layout.sass +++ b/bulma/layout/layout.sass @@ -1,6 +1,6 @@ @charset "utf-8" -@import header -@import hero -@import section -@import footer +@import "header" +@import "hero" +@import "section" +@import "footer" diff --git a/bulma/layout/section.sass b/bulma/layout/section.sass index 86bbe85f..0fce721a 100644 --- a/bulma/layout/section.sass +++ b/bulma/layout/section.sass @@ -1,10 +1,9 @@ .section background: white - padding: 40px 20px + padding: 40px 0 & + .section border-top: 1px solid rgba($border, 0.5) +desktop - padding: 40px 0 &.is-medium padding: 120px 0 &.is-large diff --git a/bulma/utilities/mixins.sass b/bulma/utilities/mixins.sass index 4af4899b..0afe955f 100644 --- a/bulma/utilities/mixins.sass +++ b/bulma/utilities/mixins.sass @@ -64,6 +64,7 @@ $tablet: 769px $desktop: 980px +$widescreen: 1180px =from($device) @media screen and (min-width: $device) @@ -88,3 +89,7 @@ $desktop: 980px =desktop @media screen and (min-width: $desktop) @content + +=widescreen + @media screen and (min-width: $widescreen) + @content diff --git a/bulma/utilities/utilities.sass b/bulma/utilities/utilities.sass index 189141ef..2f0f137e 100644 --- a/bulma/utilities/utilities.sass +++ b/bulma/utilities/utilities.sass @@ -1,6 +1,6 @@ @charset "utf-8" -@import reset -@import functions -@import mixins -@import animations +@import "reset" +@import "functions" +@import "mixins" +@import "animations"