Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 02:04:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Fix button spacing, Add image placeholders

Browse Source
This commit is contained in:
Jeremy Thomas
2016-12-22 18:17:26 +00:00
parent b8b3733d99
commit 41db07d68d
40 changed files with 1989 additions and 2178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
sass/base/generic.sass
View File

@@ -52,7 +52,7 @@ a
code
background-color: $code-background
color: $code
font-size: 0.75em
font-size: 0.8em
font-weight: normal
padding: 0.25em 0.5em 0.25em
@@ -86,7 +86,7 @@ strong
pre
background-color: $pre-background
color: $pre
font-size: 0.75em
font-size: 0.8em
white-space: pre
word-wrap: normal
code

2
sass/components/menu.sass
View File

@@ -23,7 +23,7 @@
.menu-label
color: $text-light
font-size: 0.75em
font-size: 0.8em
letter-spacing: 1px
text-transform: uppercase
&:not(:first-child)

10
sass/components/nav.sass
View File

@@ -1,4 +1,4 @@
$nav-height: 3rem !default
$nav-height: 3.5rem !default
// Components
@@ -20,7 +20,7 @@ $nav-height: 3rem !default
flex-grow: 1
flex-shrink: 0
img
max-height: 1.5rem
max-height: 1.75rem
.button + .button
margin-left: 0.75rem
.tag
@@ -48,11 +48,11 @@ a.nav-item
padding-right: 1rem
padding-top: calc(0.5rem - 1px)
&:hover
border-bottom-color: $link
border-bottom-color: $primary
border-top-color: transparent
&.is-active
border-bottom: 3px solid $link
color: $link
border-bottom: 3px solid $primary
color: $primary
padding-bottom: calc(0.5rem - 3px)
// Containers

4
sass/components/tabs.sass
View File

@@ -24,8 +24,8 @@
display: block
&.is-active
a
border-bottom-color: $link
color: $link
border-bottom-color: $primary
color: $primary
ul
align-items: center
border-bottom: 1px solid $border

83
sass/elements/button.sass
View File

@@ -1,6 +1,6 @@
$button: $grey-darker !default
$button-background: $white !default
$button-border: $grey-lighter !default
$button: $grey-darker !default
$button-background: $white !default
$button-border: $grey-lighter !default
$button-hover: $link-hover !default
$button-hover-border: $link-hover-border !default
@@ -13,63 +13,58 @@ $button-active-border: $link-active-border !default
$button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
@function buttonIconSpacing($button-size, $icon-width)
@function buttonIconSpacing($button-font-size, $icon-width)
// The rem height of the button
$button-height: 2.5 * $button-size
// For the button to be square, the horizontal padding + the icon width must equal the button height.
// We know that $horizontal-padding = 2em
$horizontal-padding: 2 * $button-size
// We want to solve:
// $button-height = $horizontal-padding + $icon-width + $x
$x: $button-height - $horizontal-padding - $icon-width
// We divide by 2 to apply this margin on both the left and right sides
@return abs($x) / 2
// based on a height of 2.5em
$button-height: 2.5 * $button-font-size // rem
// The rem total horizontal padding of the button
$button-horizontal-padding: 2 * 0.75 * $button-font-size // rem
// For the icon center to align with the button center
// the horizontal padding + the icon width must equal the button height
// $button-height = $button-horizontal-padding + $icon-width + $difference
$difference: $button-height - $button-horizontal-padding - $icon-width
@return $difference / 2
=button-icon($button-size)
$small-spacing: buttonIconSpacing($button-size, 1rem)
$normal-spacing: buttonIconSpacing($button-size, 1.5rem)
$medium-spacing: buttonIconSpacing($button-size, 2rem)
$large-spacing: buttonIconSpacing($button-size, 3rem)
=button-icon($button-font-size)
$small-offset: buttonIconSpacing($button-font-size, 1rem)
$normal-offset: buttonIconSpacing($button-font-size, 1.5rem)
$medium-offset: buttonIconSpacing($button-font-size, 2rem)
$large-offset: buttonIconSpacing($button-font-size, 3rem)
.icon
&:first-child:not(:last-child)
margin-left: -$normal-spacing / 2
margin-right: $normal-spacing
margin-left: $normal-offset
margin-right: $button-font-size / 2
&:last-child:not(:first-child)
margin-left: $normal-spacing
margin-right: -$normal-spacing / 2
margin-left: $button-font-size / 2
margin-right: $normal-offset
&:first-child:last-child
margin-left: calc(-1px - #{$normal-spacing})
margin-right: calc(-1px - #{$normal-spacing})
// The -1px is to account for the button 1px border
margin-left: calc(-1px + #{$normal-offset})
margin-right: calc(-1px + #{$normal-offset})
&.is-small
&:first-child:not(:last-child)
margin-left: -$small-spacing / 2
margin-right: $small-spacing
margin-left: $small-offset
&:last-child:not(:first-child)
margin-left: $small-spacing
margin-right: -$small-spacing / 2
margin-right: $small-offset
&:first-child:last-child
margin-left: calc(-1px - #{$small-spacing})
margin-right: calc(-1px - #{$small-spacing})
margin-left: calc(-1px + #{$small-offset})
margin-right: calc(-1px + #{$small-offset})
&.is-medium
&:first-child:not(:last-child)
margin-left: -$medium-spacing / 2
margin-right: $medium-spacing
margin-left: $medium-offset
&:last-child:not(:first-child)
margin-left: $medium-spacing
margin-right: -$medium-spacing / 2
margin-right: $medium-offset
&:first-child:last-child
margin-left: calc(-1px - #{$medium-spacing})
margin-right: calc(-1px - #{$medium-spacing})
margin-left: calc(-1px + #{$medium-offset})
margin-right: calc(-1px + #{$medium-offset})
&.is-large
&:first-child:not(:last-child)
margin-left: -$large-spacing / 2
margin-right: $large-spacing
margin-left: $large-offset
&:last-child:not(:first-child)
margin-left: $large-spacing
margin-right: -$large-spacing / 2
margin-right: $large-offset
&:first-child:last-child
margin-left: calc(-1px - #{$large-spacing})
margin-right: calc(-1px - #{$large-spacing})
margin-left: calc(-1px + #{$large-offset})
margin-right: calc(-1px + #{$large-offset})
// The button sizes use mixins so they can be used at different breakpoints
=button-small
@@ -91,8 +86,8 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
color: $button
cursor: pointer
justify-content: center
padding-left: 1em
padding-right: 1em
padding-left: 0.75em
padding-right: 0.75em
text-align: center
white-space: nowrap
strong

3
sass/elements/content.sass
View File

@@ -3,11 +3,8 @@
color: $text
// Inline
a:not(.button)
border-bottom: 1px solid $border
&:visited
color: $link-visited
&:hover
border-bottom-color: $link
li + li
margin-top: 0.25em
// Block

1
sass/elements/icon.sass
View File

@@ -1,5 +1,6 @@
.icon
+fa(21px, 1.5rem)
background: coral
.fa
font-size: inherit
line-height: inherit

2
sass/grid/tiles.sass
View File

@@ -1,7 +1,7 @@
.tile
align-items: stretch
display: block
flex-basis: auto
flex-basis: 0
flex-grow: 1
flex-shrink: 1
min-height: min-content

20
sass/utilities/variables.sass
View File

@@ -34,7 +34,7 @@ $size-2: 2.75rem !default
$size-3: 2rem !default
$size-4: 1.5rem !default
$size-5: 1.25rem !default
$size-6: 16px !default
$size-6: 14px !default
$size-7: 0.75rem !default
$weight-light: 300 !default
@@ -68,11 +68,19 @@ $dark: $grey-darker !default
// 3. Applied variables
// Invert colors
$primary-invert: findColorInvert($primary) !default
$info-invert: findColorInvert($info) !default
$success-invert: findColorInvert($success) !default
$warning-invert: findColorInvert($warning) !default
$danger-invert: findColorInvert($danger) !default
$orange-invert: findColorInvert($orange) !default
$yellow-invert: findColorInvert($yellow) !default
$green-invert: findColorInvert($green) !default
$turquoise-invert: findColorInvert($turquoise) !default
$blue-invert: findColorInvert($blue) !default
$purple-invert: findColorInvert($purple) !default
$red-invert: findColorInvert($red) !default
$primary-invert: $turquoise-invert !default
$info-invert: $blue-invert !default
$success-invert: $green-invert !default
$warning-invert: $yellow-invert !default
$danger-invert: $red-invert !default
$light-invert: $dark !default
$dark-invert: $light !default