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 icons

Browse Source
This commit is contained in:
Jeremy Thomas
2016-10-30 10:41:53 +00:00
parent 2e7e1d7c75
commit 7720041292
23 changed files with 840 additions and 466 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
sass/base/generic.sass
View File

@@ -85,12 +85,12 @@ strong
pre
background-color: $pre-background
color: $pre
font-size: 0.8em
font-size: 0.75em
white-space: pre
word-wrap: normal
code
background-color: $pre-background
color: $pre
background: none
color: inherit
display: block
font-size: 1em
overflow-x: auto

1
sass/elements/_all.sass
View File

@@ -8,6 +8,7 @@
@import "notification.sass"
@import "progress.sass"
@import "table.sass"
@import "tag.sass"
@import "title.sass"
@import "other.sass"

65
sass/elements/button.sass
View File

@@ -1,3 +1,7 @@
$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
@@ -9,17 +13,60 @@ $button-active-border: $link-active-border !default
$button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
@function buttonIconSpacing($button-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
$negative-margin: abs($x) / 2
// We need to remove 1px for the border as well
@return calc(-1px - #{$negative-margin})
=button-icon($button-size)
.icon
&:first-child
margin-left: buttonIconSpacing($button-size, 1.5rem)
&:last-child
margin-right: buttonIconSpacing($button-size, 1.5rem)
&.is-small
&:first-child
margin-left: buttonIconSpacing($button-size, 1rem)
&:last-child
margin-right: buttonIconSpacing($button-size, 1rem)
&.is-medium
&:first-child
margin-left: buttonIconSpacing($button-size, 2rem)
&:last-child
margin-right: buttonIconSpacing($button-size, 2rem)
&.is-large
&:first-child
margin-left: buttonIconSpacing($button-size, 3rem)
&:last-child
margin-right: buttonIconSpacing($button-size, 3rem)
// The button sizes use mixins so they can be used at different breakpoints
=button-small
border-radius: $radius-small
font-size: $size-small
+button-icon($size-small)
=button-medium
font-size: $size-medium
+button-icon($size-medium)
=button-large
font-size: $size-large
+button-icon($size-large)
.button
+control
+unselectable
background-color: $button-background
border: 1px solid $button-border
color: $button
cursor: pointer
justify-content: center
padding-left: 1em
@@ -28,14 +75,12 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
white-space: nowrap
strong
color: inherit
.icon,
.tag
&:first-child
margin-left: -2px
margin-right: 4px
&:last-child
margin-left: 4px
margin-right: -2px
+button-icon($size-normal)
.icon
&:first-child:not(:last-child)
margin-right: 0.25rem !important
&:last-child:not(:first-child)
margin-left: 0.25rem !important
// States
&:hover,
&.is-hovered
@@ -54,7 +99,7 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
// Colors
&.is-link
background-color: transparent
border-width: 0
border-color: transparent
color: $text
text-decoration: underline
&:hover,
@@ -70,7 +115,7 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
$color-invert: nth($pair, 2)
&.is-#{$name}
background-color: $color
border-width: 0
border-color: transparent
color: $color-invert
&:hover,
&.is-hovered

2
sass/elements/content.sass
View File

@@ -24,7 +24,7 @@
h5,
h6
color: $text-strong
font-weight: $weight-title-normal
font-weight: $weight-normal
line-height: 1.125
h1
font-size: 2em

6
sass/elements/form.sass
View File

@@ -151,7 +151,7 @@ $input-radius: $radius !default
.help
display: block
font-size: 0.875em
font-size: $size-small
margin-top: 5px
@each $name, $pair in $colors
$color: nth($pair, 1)
@@ -175,7 +175,7 @@ $input-radius: $radius !default
position: relative
text-align: left
&:not(:last-child)
margin-bottom: 10px
margin-bottom: 0.75rem
// Modifiers
&.has-addons
display: flex
@@ -278,7 +278,7 @@ $input-radius: $radius !default
& > .control
&:not(:last-child)
margin-bottom: 0
margin-right: 10px
margin-right: 0.75rem
&.is-expanded
flex-grow: 1
flex-shrink: 1

7
sass/elements/notification.sass
View File

@@ -3,12 +3,13 @@
+clearfix
background-color: $background
border-radius: $radius
padding: 16px 20px
padding: 1.25rem 1.5rem
position: relative
.delete
border-radius: 0 $radius
float: right
margin: -16px -20px 0 20px
position: absolute
right: 0
top: 0
.title,
.subtitle,
.content

55
sass/elements/other.sass
View File

@@ -11,7 +11,7 @@
margin: 0 20px
max-width: none
+widescreen
max-width: 1200px
max-width: 1080px
.delete
+delete
@@ -22,17 +22,17 @@
vertical-align: top
.icon
+fa(21px, 24px)
+fa(21px, 1.5rem)
.fa
font-size: inherit
line-height: inherit
// Sizes
&.is-small
+fa(14px, 16px)
+fa(14px, 1rem)
&.is-medium
+fa(28px, 32px)
+fa(28px, 2rem)
&.is-large
+fa(42px, 48px)
+fa(42px, 3rem)
.heading
display: block
@@ -60,48 +60,3 @@
display: inline-block
font-size: $size-medium
vertical-align: top
.tag
align-items: center
background-color: $background
border-radius: 290486px
color: $text
display: inline-flex
font-size: 12px
height: 24px
justify-content: center
line-height: 16px
padding-left: 10px
padding-right: 10px
vertical-align: top
white-space: nowrap
.delete
margin-left: 4px
margin-right: -6px
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background-color: $color
color: $color-invert
// Sizes
&.is-small
font-size: $size-small
height: 20px
padding-left: 8px
padding-right: 8px
&.is-medium
font-size: $size-normal
height: 32px
padding-left: 14px
padding-right: 14px
&.is-large
font-size: $size-5
height: 40px
line-height: 24px
padding-left: 18px
padding-right: 18px
.delete
margin-left: 4px
margin-right: -8px

8
sass/elements/progress.sass
View File

@@ -5,7 +5,7 @@
border: none
border-radius: 290486px
display: block
height: 12px
height: $size-normal
overflow: hidden
padding: 0
width: 100%
@@ -25,8 +25,8 @@
background-color: $color
// Sizes
&.is-small
height: 8px
height: $size-small
&.is-medium
height: 16px
height: $size-medium
&.is-large
height: 20px
height: $size-large

29
sass/elements/tag.sass Normal file
View File

@@ -0,0 +1,29 @@
.tag
align-items: center
background-color: $background
border-radius: 290486px
color: $text
display: inline-flex
font-size: $size-small
height: 2em
justify-content: center
line-height: 1.5
padding-left: 0.875em
padding-right: 0.875em
vertical-align: top
white-space: nowrap
.delete
margin-left: 0.25em
margin-right: -0.5em
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background-color: $color
color: $color-invert
// Sizes
&.is-medium
font-size: $size-normal
&.is-large
font-size: $size-medium

37
sass/elements/title.sass
View File

@@ -1,22 +1,32 @@
$title: $grey-darker !default
$title-size: $size-3 !default
$title-weight: $weight-light !default
$title-weight-bold: $weight-semibold !default
$subtitle: $grey-dark !default
$subtitle-size: $size-5 !default
$subtitle-strong: $grey-darker !default
$subtitle-weight: $weight-light !default
.title,
.subtitle
+block
font-weight: $weight-title-normal
word-break: break-word
em,
span
font-weight: $weight-title-normal
font-weight: $title-weight
a
&:hover
border-bottom: 1px solid
strong
font-weight: $weight-title-bold
font-weight: $title-weight-bold
.tag
vertical-align: bottom
.title
color: $text-strong
font-size: $size-large
color: $title
font-size: $title-size
font-weight: $title-weight
line-height: 1.125
strong
color: inherit
@@ -29,18 +39,14 @@
$i: index($sizes, $size)
&.is-#{$i}
font-size: $size
// Modifiers
&.is-normal
font-weight: $weight-normal
strong
font-weight: $weight-bold
.subtitle
color: $text
font-size: $size-medium
color: $subtitle
font-size: $subtitle-size
font-weight: $subtitle-weight
line-height: 1.25
strong
color: $text-strong
color: $subtitle-strong
& + .title
margin-top: -1.4rem
// Colors
@@ -48,8 +54,3 @@
$i: index($sizes, $size)
&.is-#{$i}
font-size: $size
// Modifiers
&.is-normal
font-weight: $weight-normal
strong
font-weight: $weight-bold

3
sass/utilities/controls.sass
View File

@@ -9,7 +9,7 @@ $control-radius-small: $radius-small !default
border-radius: $control-radius
box-shadow: none
display: inline-flex
font-size: 1em
font-size: $size-normal
height: 2.5em
justify-content: flex-start
line-height: 1.5
@@ -27,6 +27,7 @@ $control-radius-small: $radius-small !default
&.is-disabled
pointer-events: none
// The controls sizes use mixins so they can be used at different breakpoints
=control-small
border-radius: $control-radius-small
font-size: $size-small

4
sass/utilities/functions.sass
View File

@@ -23,6 +23,6 @@
@function findColorInvert($color)
@if (colorLuminance($color) > 0.55)
@return rgba(black, 0.7)
@return rgba(#000, 0.7)
@else
@return white
@return #fff

27
sass/utilities/mixins.sass
View File

@@ -36,39 +36,38 @@
border-radius: 290486px
cursor: pointer
display: inline-block
height: 24px
font-size: $size-normal
height: 1.5em
outline: none
position: relative
transform: rotate(45deg)
transform-origin: center center
vertical-align: top
width: 24px
width: 1.5em
&:before,
&:after
background-color: $white
content: ""
display: block
height: 2px
left: 50%
margin-left: -25%
margin-top: -1px
position: absolute
top: 50%
width: 50%
transform: translateX(-50%) translateY(-50%)
&:before
transform: rotate(45deg)
height: 2px
width: 50%
&:after
transform: rotate(-45deg)
height: 50%
width: 2px
&:hover
background-color: rgba($black, 0.2)
// Sizes
&.is-small
height: 16px
width: 16px
font-size: $size-small
&.is-medium
height: 32px
width: 32px
font-size: $size-medium
&.is-large
height: 40px
width: 40px
font-size: $size-large
=fa($size, $dimensions)
display: inline-block

13
sass/utilities/variables.sass
View File

@@ -30,18 +30,17 @@ $family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ox
$family-monospace: "Inconsolata", "Consolas", "Monaco", monospace !default
$size-1: 3.5rem !default
$size-2: 2.5rem !default
$size-3: 1.75rem !default
$size-2: 2.75rem !default
$size-3: 2rem !default
$size-4: 1.5rem !default
$size-5: 1.25rem !default
$size-6: 16px !default
$size-7: 0.75rem !default
$size-7: 0.875rem !default
$weight-light: 300 !default
$weight-normal: 400 !default
$weight-semibold: 500 !default
$weight-bold: 700 !default
$weight-title-normal: 300 !default
$weight-title-bold: 500 !default
// Miscellaneous
$easing: ease-out !default
@@ -117,7 +116,7 @@ $family-primary: $family-sans-serif !default
$family-code: $family-monospace !default
$size-small: $size-7 !default
$size-normal: $size-6 !default
$size-normal: 1rem !default
$size-medium: $size-5 !default
$size-large: $size-4 !default