From 8ce1a3611ba0fa4b63845484a971475a936c19b3 Mon Sep 17 00:00:00 2001 From: jgthms Date: Tue, 26 Jan 2016 00:02:38 +0000 Subject: [PATCH] Use flex for all tabs, Add flat input, Fix hero tabs --- bulma/components/card.sass | 18 +++++++------ bulma/components/tabs.sass | 39 +++++++++++++++++++-------- bulma/elements/buttons.sass | 4 +++ bulma/elements/controls.sass | 11 ++++++++ bulma/layout/hero.sass | 52 +++++++++++++++++------------------- 5 files changed, 78 insertions(+), 46 deletions(-) diff --git a/bulma/components/card.sass b/bulma/components/card.sass index b58e3a41..54a57ff4 100644 --- a/bulma/components/card.sass +++ b/bulma/components/card.sass @@ -1,11 +1,3 @@ -.card - background: white - box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1) - max-width: 300px - position: relative - .media:not(:last-child) - margin-bottom: 10px - .card-image display: block position: relative @@ -34,3 +26,13 @@ background: $background display: block padding: 10px + +.card + background: white + box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1) + position: relative + width: 300px + .media:not(:last-child) + margin-bottom: 10px + &.is-rounded + border-radius: 5px diff --git a/bulma/components/tabs.sass b/bulma/components/tabs.sass index 8cf6b023..90afd85e 100644 --- a/bulma/components/tabs.sass +++ b/bulma/components/tabs.sass @@ -6,9 +6,10 @@ &:not(:last-child) margin-bottom: 20px .fa - line-height: 24px - margin: 0 -2px - width: 24px + font-size: 14px + line-height: 20px + margin: 2px -2px + width: 20px a border-bottom: 1px solid $border color: $text @@ -20,7 +21,7 @@ border-bottom-color: $text-strong color: $text-strong li - display: inline-block + display: block vertical-align: top & + li margin-left: 20px @@ -30,6 +31,19 @@ color: $link ul border-bottom: 1px solid $border + display: flex + &.is-centered + a + padding: 5px 10px + li + & + li + margin-left: 0 + ul + justify-content: center + text-align: center + &.is-right + ul + justify-content: flex-end &.is-boxed a border: 1px solid transparent @@ -46,10 +60,12 @@ background: white border-color: $border border-bottom-color: transparent + &.is-centered + li + &, + & + li + margin: 0 2px &.is-toggle - ul - border-bottom: none - display: flex a border: 1px solid $border margin-bottom: 0 @@ -72,13 +88,14 @@ border-color: $primary color: $primary-invert z-index: 1 + ul + border-bottom: none &.is-fullwidth +tablet - ul - display: flex - justify-content: center - text-align: center li flex: 1 & + li margin-left: 0 + ul + justify-content: center + text-align: center diff --git a/bulma/elements/buttons.sass b/bulma/elements/buttons.sass index 52ad9743..b0a0aa20 100644 --- a/bulma/elements/buttons.sass +++ b/bulma/elements/buttons.sass @@ -16,6 +16,7 @@ .button +control padding: 3px 10px + white-space: nowrap strong color: inherit small @@ -72,6 +73,9 @@ +button-medium &.is-large +button-large + &.is-fullwidth + display: block + width: 100% &.is-flexible height: auto &.is-loading diff --git a/bulma/elements/controls.sass b/bulma/elements/controls.sass index 3178d943..35301056 100644 --- a/bulma/elements/controls.sass +++ b/bulma/elements/controls.sass @@ -51,12 +51,22 @@ width: 100% &[type="search"] border-radius: 290486px + &.is-flat + border: none + box-shadow: none + padding: 4px 8px &.is-small +control-small + &.is-flat + padding: 4px 6px &.is-medium +control-medium + &.is-flat + padding: 4px 10px &.is-large +control-large + &.is-flat + padding: 4px 12px &.is-fullwidth display: block width: 100% @@ -161,6 +171,7 @@ .control position: relative + text-align: left &.is-loading &:after @extend .loader diff --git a/bulma/layout/hero.sass b/bulma/layout/hero.sass index 920cc178..d1cea9d7 100644 --- a/bulma/layout/hero.sass +++ b/bulma/layout/hero.sass @@ -1,3 +1,18 @@ +.hero-video + +overlay + overflow: hidden + &.is-transparent + opacity: 0.3 + video + left: 50% + min-height: 100% + min-width: 100% + position: absolute + top: 50% + transform: translate3d(-50%, -50%, 0) + +mobile + display: none + .hero-content padding: 40px 20px +desktop @@ -19,22 +34,14 @@ .hero background: white text-align: center - a - color: inherit .header background: none box-shadow: none .tabs - ul - border-bottom: none a border: none - margin-bottom: 0 - padding: 0 0 10px - &.is-boxed - a - border: none - padding: 6px 12px + ul + border-bottom: none &.is-alt background: $background color: $text-light @@ -69,7 +76,8 @@ opacity: 1 li.is-active a opacity: 1 - &.is-boxed + &.is-boxed, + &.is-toggle a color: $color-invert &:hover @@ -97,34 +105,21 @@ .header-item border-top-color: rgba($color-invert, 0.2) &.is-fullheight, - &.is-medium, &.is-large +tablet - .title - font-size: $size-huge - .subtitle - font-size: $size-large .tabs font-size: $size-medium - a - padding-bottom: 15px - &.is-boxed - a - padding: 12px 16px &.is-medium +tablet .hero-content padding: 120px 20px - .title - font-size: 40px - .subtitle - font-size: 24px - .tabs - font-size: 16px +desktop .hero-content padding: 120px 0 &.is-large + .tabs + a + padding: 10px 15px +tablet .hero-content padding: 240px 20px @@ -137,6 +132,9 @@ flex-direction: column height: 100vh justify-content: space-between + .tabs + a + padding: 15px 20px .hero-content display: flex flex: 1