library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2025-01-09 15:44:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add white black light dark colors, Fix button inverted

Browse Source
This commit is contained in:
Jeremy Thomas 2016-05-06 00:23:00 +01:00
parent 7ecedc6ec5
commit 15e6ecde1c
15 changed files with 36 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -3,6 +3,8 @@
## 0.0.25
* Added: `utilities/controls.sass` and `elements/form.sass`
* Added: new responsive classes
* Added: white/black and light/dark colors
* Changed: `.tabs` need `.icon` now
* Changed: cdnjs link doesn't include version

6
sass/components/card.sass
View File

@ -1,6 +1,6 @@
.card-header
align-items: stretch
box-shadow: 0 1px 2px rgba(black, 0.1)
box-shadow: 0 1px 2px rgba($black, 0.1)
display: flex
min-height: 40px
@ -43,8 +43,8 @@
border-right: 1px solid $border
.card
background: white
box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1)
background: $white
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
color: $text
max-width: 100%
position: relative

2
sass/components/message.sass
View File

@ -24,7 +24,7 @@
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
$lightning: (100% - lightness($color)) - 4%
$lightning: max((100% - lightness($color)) - 4%, 0%)
$darkness: max(lightness($color) - 10%, lightness($color))
&.is-#{$name}
background: lighten($color, $lightning)

2
sass/components/modal.sass
View File

@ -1,6 +1,6 @@
.modal-background
+overlay
background: rgba(black, 0.86)
background: rgba($black, 0.86)
.modal-content
margin: 0 20px

2
sass/components/tabs.sass
View File

@ -49,7 +49,7 @@
// Modifiers
&.is-active
a
background: white
background: $white
border-color: $border
border-bottom-color: transparent
// Modifiers

8
sass/elements/box.sass
View File

@ -1,14 +1,14 @@
.box
@extend .block
background: white
background: $white
border-radius: 5px
box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1)
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
display: block
padding: 20px
a.box
&:hover,
&:focus
box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px $link
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link
&:active
box-shadow: inset 0 1px 2px rgba(black, 0.2), 0 0 0 1px $link
box-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link

15
sass/elements/button.sass
View File

@ -42,7 +42,7 @@
&:hover
color: $control-hover
&:active
box-shadow: inset 0 1px 2px rgba(black, 0.2)
box-shadow: inset 0 1px 2px rgba($black, 0.2)
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
@ -63,14 +63,6 @@
color: $color
&:hover
background: darken($color-invert, 5%)
&.is-outlined
background-color: transparent
border-color: $color-invert
color: $color-invert
&:hover
background: rgba(black, 0.05)
border-color: $color-invert
color: $color-invert
&.is-loading
&:after
border-color: transparent transparent $color-invert $color-invert !important
@ -80,8 +72,9 @@
color: $color
&:hover,
&:focus
border-color: darken($color, 10%)
color: darken($color, 10%)
background: $color
border-color: $color
color: $color-invert
&.is-link
background: transparent
border-color: transparent

2
sass/elements/form.sass
View File

@ -7,7 +7,7 @@
.input
+form-control
box-shadow: inset 0 1px 2px rgba(black, 0.1)
box-shadow: inset 0 1px 2px rgba($black, 0.1)
max-width: 100%
width: 100%
&[type="search"]

9
sass/elements/other.sass
View File

@ -2,7 +2,7 @@
+unselectable
-moz-appearance: none
-webkit-appearance: none
background: rgba(black, 0.2)
background: rgba($black, 0.2)
border: none
border-radius: 290486px
cursor: pointer
@ -13,7 +13,7 @@
width: 24px
&:before,
&:after
background: white
background: $white
content: ""
display: block
height: 2px
@ -28,7 +28,7 @@
&:after
transform: rotate(-45deg)
&:hover
background: rgba(black, 0.5)
background: rgba($black, 0.5)
// Sizes
&.is-small
height: 16px
@ -160,9 +160,6 @@
&.is-#{$name}
background: $color
color: $color-invert
&.is-dark
background: $text
color: $text-invert
// Sizes
&.is-small
font-size: $size-small

2
sass/elements/table.sass
View File

@ -1,5 +1,5 @@
.table
background: white
background: $white
color: $text-strong
margin-bottom: 20px
width: 100%

6
sass/layout/header.sass
View File

@ -1,6 +1,6 @@
.header
+clearfix
background: white
background: $white
display: flex
line-height: 24px
position: relative
@ -12,7 +12,7 @@
width: 100%
// Modifiers
&.has-shadow
box-shadow: 0 1px 2px rgba(black, 0.1)
box-shadow: 0 1px 2px rgba($black, 0.1)
// Responsiveness
+mobile
.container
@ -128,7 +128,7 @@ a.header-item
.header-menu
// Responsiveness
+mobile
box-shadow: 0 4px 7px rgba(black, 0.1)
box-shadow: 0 4px 7px rgba($black, 0.1)
display: none
.header-item
border-top: 1px solid rgba($border, 0.5)

6
sass/layout/hero.sass
View File

@ -36,7 +36,7 @@
margin-right: 20px
.hero
background: white
background: $white
.header
background: none
.container
@ -89,7 +89,7 @@
a
color: $color-invert
&:hover
background: rgba(black, 0.1)
background: rgba($black, 0.1)
li.is-active a
&,
&:hover
@ -106,7 +106,7 @@
span
background: $color-invert
&:hover
background: rgba(black, 0.1)
background: rgba($black, 0.1)
&.is-active
span
background: $color-invert

2
sass/layout/section.sass
View File

@ -1,5 +1,5 @@
.section
background: white
background: $white
padding: 40px 20px
// Responsiveness
+desktop

2
sass/utilities/functions.sass
View File

@ -29,6 +29,6 @@
@function findColorInvert($color)
@if (colorLuminance($color) > 0.8)
@return rgba(black, 0.5)
@return rgba($black, 0.5)
@else
@return white

10
sass/utilities/variables.sass
View File

@ -2,11 +2,13 @@
// Colors
$black: #111 !default
$grey-darker: #222324 !default
$grey-dark: #69707a !default
$grey: #aeb1b5 !default
$grey-light: #d3d6db !default
$grey-lighter: #f5f7fa !default
$white: #fff !default
$blue: #42afe3 !default
$green: #97cd76 !default
@ -62,7 +64,8 @@ $success: $green !default
$warning: $yellow !default
$danger: $red !default
$dark: $grey-darker !default
$light: $grey-lighter !default
$dark: $grey-dark !default
$text: $grey-dark !default
@ -77,7 +80,8 @@ $success-invert: findColorInvert($success) !default
$warning-invert: findColorInvert($warning) !default
$danger-invert: findColorInvert($danger) !default
$dark-invert: findColorInvert($dark) !default
$light-invert: $dark !default
$dark-invert: $light !default
// General colors
@ -142,6 +146,6 @@ $size-huge: $size-1 !default
// 4. Lists and maps
$colors: (dark: ($dark, $dark-invert), primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert)) !default
$colors: (white: ($white, $black), black: ($black, $white), light: ($light, $light-invert), dark: ($dark, $dark-invert), primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert)) !default
$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 !default