Use flex for all tabs, Add flat input, Fix hero tabs

diff --git a/bulma/components/card.sass b/bulma/components/card.sass
index b58e3a41f6b0e1f89c9ffba43039c64a26a73ab9..54a57ff47240530b059a27b034b1ee4f34c30bac 100644 (file)
--- 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 8cf6b02325672dcafb131606759c08649797cae2..90afd85e2f5fd9310c2e570925808885c56ed348 100644 (file)
--- 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 52ad97433c9789c5fba01840d809fd76df955475..b0a0aa203e82332802c895dde027dc5f8ecb10ee 100644 (file)
--- 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 3178d943e1005fedc410447eab1e3f397769ca99..3530105610577a4995a84018fcf21f5f54b645f2 100644 (file)
--- 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 920cc178bbc9e4bcb46288a819e31724f8d2231a..d1cea9d7f8b2e54ff2bbc6fd4a3e0e22a85f46d1 100644 (file)
--- 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