From 8b9122dd92a0f37fe9c652b33f60006b868084d8 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Sat, 30 Jan 2016 21:40:28 +0000 Subject: [PATCH] Fix global variable name clash, Fix hamburger menu, Fix grid --- bulma/components/grid.sass | 2 +- bulma/config/variables.sass | 1 + bulma/elements/elements.sass | 50 +++++++++++++++++++++------------- bulma/layout/hero.sass | 2 +- bulma/utilities/functions.sass | 8 +++--- 5 files changed, 38 insertions(+), 25 deletions(-) diff --git a/bulma/components/grid.sass b/bulma/components/grid.sass index 72a2d1ff..f8878ae5 100644 --- a/bulma/components/grid.sass +++ b/bulma/components/grid.sass @@ -33,7 +33,7 @@ display: flex &.is-gapless & > .column + .column - margin-left: 0 + margin: 0 &.is-vcentered align-items: center &.is-grid diff --git a/bulma/config/variables.sass b/bulma/config/variables.sass index 1c06bdff..7445cafa 100644 --- a/bulma/config/variables.sass +++ b/bulma/config/variables.sass @@ -20,6 +20,7 @@ $primary: $turquoise // Typography $family-sans-serif: "Helvetica Neue", "Helvetica", "Arial", sans-serif +$family-monospace: "Source Code Pro", "Monaco", "Inconsolata", monospace $size-1: 48px $size-2: 40px diff --git a/bulma/elements/elements.sass b/bulma/elements/elements.sass index 4011195c..4ee96522 100644 --- a/bulma/elements/elements.sass +++ b/bulma/elements/elements.sass @@ -6,18 +6,6 @@ @import messages @import notifications -.highlight - 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% - .delete background: rgba(black, 0.2) border-radius: 290486px @@ -68,37 +56,38 @@ cursor: pointer display: block height: $header-height - padding: 19px 17px position: relative width: $header-height span background: $text display: block height: 1px - left: 17px + left: 50% + margin-left: -7px position: absolute + top: 50% transition: none $speed $easing transition-property: background, left, opacity, transform width: 15px &:nth-child(1) - top: 19px + margin-top: -6px &:nth-child(2) - top: 24px + margin-top: -1px &:nth-child(3) - bottom: 20px + margin-top: 4px &:hover background: $background &.is-active span background: $link &:nth-child(1) - left: 20px + margin-left: -5px transform: rotate(45deg) transform-origin: left top &:nth-child(2) opacity: 0 &:nth-child(3) - left: 20px + margin-left: -5px transform: rotate(-45deg) transform-origin: left bottom @@ -109,6 +98,29 @@ margin-bottom: 5px text-transform: uppercase +.highlight + 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% + +.image + display: block + position: relative + vertical-align: top + img + +overlay + display: block + width: 100% + &.is-3x2 + padding-top: 66.6666% + .loader animation: spin-around 500ms infinite linear border: 2px solid $border diff --git a/bulma/layout/hero.sass b/bulma/layout/hero.sass index f1975157..6ccaae05 100644 --- a/bulma/layout/hero.sass +++ b/bulma/layout/hero.sass @@ -131,8 +131,8 @@ align-items: stretch display: flex flex-direction: column - height: 100vh justify-content: space-between + min-height: 100vh .tabs a padding: 15px 20px diff --git a/bulma/utilities/functions.sass b/bulma/utilities/functions.sass index 8acbb7d5..ca7f72be 100644 --- a/bulma/utilities/functions.sass +++ b/bulma/utilities/functions.sass @@ -9,8 +9,8 @@ @return $value @function colorLuminance($color) - $colors: ('red': red($color),'green': green($color),'blue': blue($color)) - @each $name, $value in $colors + $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color)) + @each $name, $value in $color-rgb $adjusted: 0 $value: $value / 255 @if $value < 0.03928 @@ -18,8 +18,8 @@ @else $value: ($value + .055) / 1.055 $value: powerNumber($value, 2) - $colors: map-merge($colors, ($name: $value)) - @return (map-get($colors, 'red') * .2126) + (map-get($colors, 'green') * .7152) + (map-get($colors, 'blue') * .0722) + $color-rgb: map-merge($color-rgb, ($name: $value)) + @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722) @function closestEvenNumber($number) @if ($number % 2 == 0px)