library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix #242

Browse Source
This commit is contained in:
Jeremy Thomas 2016-06-29 23:59:48 +01:00
parent 02313b85eb
commit 91d04459db
22 changed files with 72 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
sass/base/generic.sass
View File

@ -1,5 +1,5 @@
html
background: $body-background
background-color: $body-background
font-size: $size-normal
-moz-osx-font-smoothing: grayscale
-webkit-font-smoothing: antialiased
@ -48,7 +48,7 @@ a
color: $link-hover
code
background: $code-background
background-color: $code-background
color: $code
font-size: 12px
font-weight: normal
@ -79,12 +79,12 @@ strong
// Block
pre
background: $pre-background
background-color: $pre-background
color: $pre
white-space: pre
word-wrap: normal
code
background: $pre-background
background-color: $pre-background
color: $pre
display: block
overflow-x: auto

2
sass/components/card.sass
View File

@ -43,7 +43,7 @@
border-right: 1px solid $border
.card
background: $white
background-color: $white
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
color: $text
max-width: 100%

2
sass/components/media.sass
View File

@ -1,5 +1,5 @@
.media-number
background: $background
background-color: $background
border-radius: 290486px
display: inline-block
font-size: $size-medium

4
sass/components/menu.sass
View File

@ -10,11 +10,11 @@
display: block
padding: 5px 10px
&:hover
background: $background
background-color: $background
color: $link
// Modifiers
&.is-active
background: $link
background-color: $link
color: $link-invert
li
ul

8
sass/components/message.sass
View File

@ -6,7 +6,7 @@
color: inherit
.message-header
background: $text
background-color: $text
border-radius: $radius $radius 0 0
color: $text-invert
padding: 7px 10px
@ -18,7 +18,7 @@
.message
@extend .block
background: $background
background-color: $background
border-radius: $radius
// Colors
@each $name, $pair in $colors
@ -27,9 +27,9 @@
$lightning: max((100% - lightness($color)) - 4%, 0%)
$darkness: max(lightness($color) - 10%, lightness($color))
&.is-#{$name}
background: lighten($color, $lightning)
background-color: lighten($color, $lightning)
.message-header
background: $color
background-color: $color
color: $color-invert
.message-body
border-color: $color

6
sass/components/modal.sass
View File

@ -1,6 +1,6 @@
.modal-background
+overlay
background: rgba($black, 0.86)
background-color: rgba($black, 0.86)
.modal-content
margin: 0 20px
@ -25,7 +25,7 @@
.modal-card
@extend .modal-content
background: $white
background-color: $white
border-radius: $radius-large
display: flex
flex-direction: column
@ -35,7 +35,7 @@
.modal-card-head,
.modal-card-foot
align-items: center
background: $background
background-color: $background
display: flex
flex-shrink: 0
justify-content: flex-start

4
sass/components/nav.sass
View File

@ -52,7 +52,7 @@ a.nav-item
.nav-menu
// Responsiveness
+mobile
background: $white
background-color: $white
box-shadow: 0 4px 7px rgba($black, 0.1)
left: 0
display: none
@ -91,7 +91,7 @@ a.nav-item
.nav
align-items: stretch
background: $white
background-color: $white
display: flex
min-height: $nav-height
position: relative

4
sass/components/panel.sass
View File

@ -8,7 +8,7 @@
line-height: inherit
.panel-heading
background: $background
background-color: $background
border-bottom: 1px solid $border
border-radius: 4px 4px 0 0
color: $text-strong
@ -48,7 +48,7 @@
a.panel-block
&:hover
background: $background
background-color: $background
.panel
border: 1px solid $border

8
sass/components/tabs.sass
View File

@ -62,12 +62,12 @@
padding-bottom: 5px
padding-top: 5px
&:hover
background: $background
background-color: $background
border-bottom-color: $border
li
&.is-active
a
background: $white
background-color: $white
border-color: $border
border-bottom-color: transparent !important
&.is-fullwidth
@ -81,7 +81,7 @@
padding-top: 5px
position: relative
&:hover
background: $background
background-color: $background
border-color: $border-hover
z-index: 2
li
@ -93,7 +93,7 @@
border-radius: 0 $radius $radius 0
&.is-active
a
background: $primary
background-color: $primary
border-color: $primary
color: $primary-invert
z-index: 1

2
sass/elements/box.sass
View File

@ -1,6 +1,6 @@
.box
@extend .block
background: $white
background-color: $white
border-radius: $radius-large
box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
display: block

16
sass/elements/button.sass
View File

@ -50,42 +50,42 @@
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background: $color
background-color: $color
border-color: transparent
color: $color-invert
&:hover,
&:focus,
&.is-active
background: darken($color, 10%)
background-color: darken($color, 10%)
border-color: transparent
color: $color-invert
&:active
border-color: transparent
&.is-inverted
background: $color-invert
background-color: $color-invert
color: $color
&:hover
background: darken($color-invert, 5%)
background-color: darken($color-invert, 5%)
&.is-loading
&:after
border-color: transparent transparent $color-invert $color-invert !important
&.is-outlined
background: transparent
background-color: transparent
border-color: $color
color: $color
&:hover,
&:focus
background: $color
background-color: $color
border-color: $color
color: $color-invert
&.is-link
background: transparent
background-color: transparent
border-color: transparent
color: $text
text-decoration: underline
&:hover,
&:focus
background: $border
background-color: $border
color: $text-strong
// Sizes
&.is-small

2
sass/elements/content.sass
View File

@ -32,7 +32,7 @@
&:not(:first-child)
margin-top: 40px
blockquote
background: $background
background-color: $background
border-left: 5px solid $border
padding: 1.5em
h1

4
sass/elements/notification.sass
View File

@ -1,7 +1,7 @@
.notification
@extend .block
+clearfix
background: $background
background-color: $background
border-radius: $radius
padding: 16px 20px
position: relative
@ -17,5 +17,5 @@
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background: $color
background-color: $color
color: $color-invert

18
sass/elements/other.sass
View File

@ -2,7 +2,7 @@
@extend .unselectable
-moz-appearance: none
-webkit-appearance: none
background: rgba($black, 0.2)
background-color: rgba($black, 0.2)
border: none
border-radius: 290486px
cursor: pointer
@ -13,7 +13,7 @@
width: 24px
&:before,
&:after
background: $white
background-color: $white
content: ""
display: block
height: 2px
@ -28,7 +28,7 @@
&:after
transform: rotate(-45deg)
&:hover
background: rgba($black, 0.5)
background-color: rgba($black, 0.5)
// Sizes
&.is-small
height: 16px
@ -60,7 +60,7 @@
position: relative
width: $nav-height
span
background: $text
background-color: $text
display: block
height: 1px
left: 50%
@ -77,11 +77,11 @@
&:nth-child(3)
margin-top: 4px
&:hover
background: $background
background-color: $background
// Modifers
&.is-active
span
background: $link
background-color: $link
&:nth-child(1)
margin-left: -5px
transform: rotate(45deg)
@ -124,7 +124,7 @@
width: 16px
.number
background: $background
background-color: $background
border-radius: 290486px
display: inline-block
font-size: $size-medium
@ -132,7 +132,7 @@
.tag
align-items: center
background: $background
background-color: $background
border-radius: 290486px
color: $text
display: inline-flex
@ -155,7 +155,7 @@
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background: $color
background-color: $color
color: $color-invert
// Sizes
&.is-small

10
sass/elements/progress.sass
View File

@ -10,19 +10,19 @@
padding: 0
width: 100%
&::-webkit-progress-bar
background: $border
background-color: $border
&::-webkit-progress-value
background: $text
background-color: $text
&::-moz-progress-bar
background: $text
background-color: $text
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
&.is-#{$name}
&::-webkit-progress-value
background: $color
background-color: $color
&::-moz-progress-bar
background: $color
background-color: $color
// Sizes
&.is-small
height: 8px

12
sass/elements/table.sass
View File

@ -1,5 +1,5 @@
.table
background: $white
background-color: $white
color: $text-strong
margin-bottom: 20px
width: 100%
@ -27,7 +27,7 @@
display: block
padding: 8px 10px
&:hover
background: $link
background-color: $link
color: $link-invert
&.is-narrow
white-space: nowrap
@ -37,7 +37,7 @@
text-align: left
tr
&:hover
background: $background
background-color: $background
color: $text-strong
thead
td,
@ -84,8 +84,8 @@
tbody
tr
&:hover
background: darken($background, 2%)
background-color: darken($background, 2%)
&:nth-child(2n)
background: $background
background-color: $background
&:hover
background: darken($background, 2%)
background-color: darken($background, 2%)

2
sass/layout/footer.sass
View File

@ -1,5 +1,5 @@
.footer
background: $background
background-color: $background
padding: 40px 20px 80px
a
&,

4
sass/layout/header.sass
View File

@ -2,7 +2,7 @@ $header-height: 50px !default
.header
+clearfix
background: $white
background-color: $white
display: flex
line-height: 24px
min-height: $header-height
@ -143,7 +143,7 @@ a.header-item
justify-content: center
.header.is-small
background: $background
background-color: $background
box-shadow: none
height: 40px
z-index: 1

16
sass/layout/hero.sass
View File

@ -49,7 +49,7 @@
.hero
align-items: stretch
background: $white
background-color: $white
display: flex
flex-direction: column
justify-content: space-between
@ -64,7 +64,7 @@
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background: $color
background-color: $color
color: $color-invert
.title
color: $color-invert
@ -80,7 +80,7 @@
box-shadow: 0 1px 0 rgba($color-invert, 0.2)
.nav-menu
+mobile
background: $color
background-color: $color
a.nav-item,
.nav-item a:not(.button)
color: rgba($color-invert, 0.5)
@ -101,11 +101,11 @@
a
color: $color-invert
&:hover
background: rgba($black, 0.1)
background-color: rgba($black, 0.1)
li.is-active a
&,
&:hover
background: $color-invert
background-color: $color-invert
border-color: $color-invert
color: $color
// Modifiers
@ -117,12 +117,12 @@
+mobile
.nav-toggle
span
background: $color-invert
background-color: $color-invert
&:hover
background: rgba($black, 0.1)
background-color: rgba($black, 0.1)
&.is-active
span
background: $color-invert
background-color: $color-invert
.nav-menu
.nav-item
border-top-color: rgba($color-invert, 0.2)

2
sass/layout/section.sass
View File

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

4
sass/utilities/controls.sass
View File

@ -2,7 +2,7 @@
-moz-appearance: none
-webkit-appearance: none
align-items: center
background: $control-background
background-color: $control-background
border: 1px solid $control-border
border-radius: $radius
color: $control
@ -24,7 +24,7 @@
outline: none
&[disabled],
&.is-disabled
background: $background
background-color: $background
border-color: $control-border
cursor: not-allowed
pointer-events: none

4
sass/utilities/mixins.sass
View File

@ -46,7 +46,9 @@
@content
=replace($background, $width, $height)
background: $background center center no-repeat
background-color: $background
background-position: center center
background-repeat: no-repeat
background-size: $width $height
display: block
height: $height