Add column gap variable, Fix hamburger

This commit is contained in:
Jeremy Thomas
2016-01-31 22:27:58 +00:00
parent c01255b873
commit 3ed61b2e0c
9 changed files with 75 additions and 188 deletions

View File

@@ -1,11 +1,12 @@
.column
overflow: hidden
+mobile
& + .column
margin-top: 20px
margin-top: $column-gap
+tablet
flex: 1
& + .column
margin-left: 20px
margin-left: $column-gap
&.is-double
flex: 2
&.is-triple
@@ -28,7 +29,7 @@
.columns
&:not(:last-child)
margin-bottom: 20px
margin-bottom: $column-gap
+tablet
display: flex
&.is-gapless

View File

@@ -25,13 +25,27 @@
+tablet
margin-right: 10px
.media-left
+mobile
margin-bottom: 20px
+tablet
margin-right: 20px
.media-right
+mobile
margin-top: 20px
+tablet
margin-left: 20px
.media-content
flex: 1
text-align: left
.textarea
min-height: 60px
.media
align-items: flex-start
text-align: left
.content:not(:last-child)
margin-bottom: 10px
.media

View File

@@ -33,6 +33,8 @@ $size-7: 11px
// Dimensions
$column-gap: 20px
$header-height: 50px
// Miscellaneous

View File

@@ -55,9 +55,9 @@
.hamburger
cursor: pointer
display: block
height: $header-height
height: 50px
position: relative
width: $header-height
width: 50px
span
background: $text
display: block
@@ -90,6 +90,9 @@
margin-left: -5px
transform: rotate(-45deg)
transform-origin: left bottom
+tablet
height: $header-height
width: $header-height
.heading
display: block

View File

@@ -3,7 +3,7 @@
background: white
box-shadow: 0 1px 2px rgba(black, 0.1)
display: flex
height: $header-height
height: 50px
line-height: 24px
position: relative
text-align: center
@@ -13,6 +13,8 @@
box-shadow: 0 1px 0 rgba($border, 0.3)
display: flex
width: 100%
+tablet
height: $header-height
.header-toggle
@extend .hamburger
@@ -109,9 +111,10 @@
background: white
box-shadow: 0 4px 7px rgba(black, 0.1)
display: none
min-width: 120px
position: absolute
right: 0
top: $header-height
top: 50px
z-index: 100
.header-item
border-top: 1px solid rgba($border, 0.5)