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

Init

Browse Source
This commit is contained in:
jgthms 2016-01-24 00:03:43 +00:00
commit 5384d1531f
37 changed files with 5029 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
.sass-cache
.DS_Store

21
LICENSE Normal file
View File

@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) 2016 Jeremy Thomas
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

7
README.md Normal file
View File

@ -0,0 +1,7 @@
# [Bulma](http://bulma.io)
Bulma is a modern CSS framework based on [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes).
## Copyright and license
Code copyright 2016 Jeremy Thomas. Code released under [the MIT license](https://github.com/jgthms/bulma/blob/master/LICENSE).

9
bulma.sass vendored Normal file
View File

@ -0,0 +1,9 @@
@charset "utf-8"
@import bulma/utilities/utilities
@import bulma/config/variables
@import bulma/config/generated-variables
@import bulma/base/base
@import bulma/elements/elements
@import bulma/components/components
@import bulma/layout/layout

6
bulma/base/base.sass Normal file
View File

@ -0,0 +1,6 @@
@charset "utf-8"
@import generic
@import content
@import highlight
@import helpers

51
bulma/base/content.sass Normal file
View File

@ -0,0 +1,51 @@
.content
&:not(:last-child)
margin-bottom: 20px
h1,
h2,
h3,
h4,
h5,
h6
color: $text-strong
font-weight: 300
line-height: 1.125
margin-bottom: 20px
h1,
h2,
h3
&:not(:first-child)
margin-top: 40px
h1
font-size: 2em
h2
font-size: 1.75em
h3
font-size: 1.5em
h4
font-size: 1.25em
h5
font-size: 1.125em
h6
font-size: 1em
p:not(:last-child)
margin-bottom: 1em
li + li
margin-top: 0.25em
ol
list-style: decimal outside
margin: 1em 2em
ul
list-style: disc outside
margin: 1em 2em
ul
list-style-type: circle
margin-top: 0.5em
ul
list-style-type: square
blockquote
background: $background
border-left: 5px solid $border
padding: 1.5em
&:not(:last-child)
margin-bottom: 1em

101
bulma/base/generic.sass Normal file
View File

@ -0,0 +1,101 @@
html
background: $body-background
font-size: $size-normal
-moz-osx-font-smoothing: grayscale
-webkit-font-smoothing: antialiased
min-width: 300px
overflow-x: hidden
overflow-y: scroll
text-rendering: optimizeLegibility
body,
button,
input,
select,
textarea
font-family: $family-primary
code,
pre
-moz-osx-font-smoothing: auto
-webkit-font-smoothing: auto
font-family: monospace
line-height: 1.25
body
color: $text
font-size: 1rem
line-height: 1.428571428571429
a
color: $link
cursor: pointer
text-decoration: none
transition: none $speed $easing
&:hover
color: $link-hover
code
background: $code-background
color: $code
font-size: 12px
font-weight: normal
padding: 1px 2px 2px
hr
border-top-color: $border
margin: 20px 0
img
max-height: 100%
max-width: 100%
input[type="checkbox"],
input[type="radio"]
vertical-align: baseline
small
font-size: $size-small
strong
color: $text-strong
article,
aside,
figure,
footer,
header,
hgroup,
section
display: block
pre
background: $pre-background
color: $pre
white-space: pre
word-wrap: normal
code
background: $pre-background
color: $pre
display: block
overflow-x: auto
padding: 16px 20px
table
width: 100%
th,
td
text-align: left
vertical-align: top
th
color: $text-strong
.container
margin: 0 auto
max-width: 960px
position: relative
.fa
font-size: 21px
text-align: center
vertical-align: top

27
bulma/base/helpers.sass Normal file
View File

@ -0,0 +1,27 @@
.is-centered
text-align: center
.is-left
text-align: left
.is-right
text-align: right
.is-block
display: block
.is-disabled
pointer-events: none
.is-inline
display: inline
.is-marginless
margin: 0 !important
.is-unselectable
-webkit-touch-callout: none
-webkit-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none

123
bulma/base/highlight.sass Normal file
View File

@ -0,0 +1,123 @@
.highlight
background-color: #fdf6e3
color: #586e75
.c
color: #93a1a1
.err,
.g
color: #586e75
.k
color: #859900
.l,
.n
color: #586e75
.o
color: #859900
.x
color: #cb4b16
.p
color: #586e75
.cm
color: #93a1a1
.cp
color: #859900
.c1
color: #93a1a1
.cs
color: #859900
.gd
color: #2aa198
.ge
color: #586e75
font-style: italic
.gr
color: #dc322f
.gh
color: #cb4b16
.gi
color: #859900
.go,
.gp
color: #586e75
.gs
color: #586e75
font-weight: bold
.gu
color: #cb4b16
.gt
color: #586e75
.kc
color: #cb4b16
.kd
color: #268bd2
.kn,
.kp
color: #859900
.kr
color: #268bd2
.kt
color: #dc322f
.ld
color: #586e75
.m,
.s
color: #2aa198
.na
color: #B58900
.nb
color: #586e75
.nc
color: #268bd2
.no
color: #cb4b16
.nd
color: #268bd2
.ni,
.ne
color: #cb4b16
.nf
color: #268bd2
.nl,
.nn,
.nx,
.py
color: #586e75
.nt,
.nv
color: #268bd2
.ow
color: #859900
.w
color: #586e75
.mf,
.mh,
.mi,
.mo
color: #2aa198
.sb
color: #93a1a1
.sc
color: #2aa198
.sd
color: #586e75
.s2
color: #2aa198
.se
color: #cb4b16
.sh
color: #586e75
.si,
.sx
color: #2aa198
.sr
color: #dc322f
.s1,
.ss
color: #2aa198
.bp,
.vc,
.vg,
.vi
color: #268bd2
.il
color: #2aa198

36
bulma/components/card.sass Normal file
View File

@ -0,0 +1,36 @@
.card
background: white
box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1)
max-width: 300px
position: relative
.media:not(:last-child)
margin-bottom: 10px
.card-image
display: block
position: relative
img
display: block
&.is-square,
&.is-4x3,
&.is-3x2
img
+overlay
height: 100%
width: 100%
&.is-square
padding-top: 100%
&.is-4x3
padding-top: 75%
&.is-3x2
padding-top: 66.6666%
.card-content
padding: 20px
.title + .subtitle
margin-top: -20px
.card-footer
background: $background
display: block
padding: 10px

11
bulma/components/components.sass Normal file
View File

@ -0,0 +1,11 @@
@charset "utf-8"
@import grid
@import navbar
@import card
@import table
@import tabs
@import media
.block:not(:last-child)
margin-bottom: 20px

48
bulma/components/grid.sass Normal file
View File

@ -0,0 +1,48 @@
.column
+mobile
& + .column
margin-top: 20px
+tablet
flex: 1
& + .column
margin-left: 20px
&.is-double
flex: 2
&.is-triple
flex: 3
&.is-quadruple
flex: 4
&.is-half
flex: none
width: 50%
&.is-third
flex: none
width: 33.3333%
&.is-quarter
flex: none
width: 25%
@for $i from 1 through 11
&.is-#{$i}
flex: none
width: ($i / 12) * 100%
.columns
&:not(:last-child)
margin-bottom: 20px
+tablet
display: flex
&.is-gapless
& > .column + .column
margin-left: 0
&.is-vcentered
align-items: center
&.is-grid
+tablet
flex-wrap: wrap
& > .column
flex-basis: 33.3333%
max-width: 33.3333%
padding: 10px
width: 33.3333%
& + .column
margin-left: 0

69
bulma/components/media.sass Normal file
View File

@ -0,0 +1,69 @@
.media-image
&.is-32
width: 32px
&.is-40
width: 40px
+mobile
margin-bottom: 10px
+tablet
margin-right: 10px
width: 60px
.media-number
background: $background
border-radius: 290486px
display: inline-block
font-size: $size-medium
height: 32px
line-height: 24px
min-width: 32px
padding: 4px 8px
text-align: center
vertical-align: top
+mobile
margin-bottom: 10px
+tablet
margin-right: 10px
.media-content
flex: 1
.textarea
min-height: 60px
.media
align-items: flex-start
.content:not(:last-child)
margin-bottom: 10px
.media
border-top: 1px solid rgba($border, 0.5)
display: flex
padding-top: 10px
.media-image
margin-bottom: 0
margin-right: 10px
width: 40px
.textarea
+control-small
.button
+button-small
.content:not(:last-child),
.control:not(:last-child)
margin-bottom: 5px
.media
font-size: 12px
padding-top: 5px
& + .media
margin-top: 5px
& + .media
border-top: 1px solid rgba($border, 0.5)
margin-top: 10px
padding-top: 10px
&.is-large
& + .media
margin-top: 20px
padding-top: 20px
+tablet
display: flex
&.is-large
.media-number
margin-right: 20px

25
bulma/components/menu.sass Normal file
View File

@ -0,0 +1,25 @@
.menu
border: 1px solid $border
.menu-heading
@extend .heading
color: $text-strong
.menu-list
a
color: $text
&:hover
color: $link
.menu-block
.checkbox
border: 1px solid transparent
border-radius: $radius
display: block
padding: 8px
padding-left: 32px
input
left: 9px
top: 9px
&:hover
border-color: $link

45
bulma/components/navbar.sass Normal file
View File

@ -0,0 +1,45 @@
.navbar-item
.title,
.subtitle
margin-bottom: 0
+mobile
&:not(:last-child)
margin-bottom: 10px
.navbar
&:not(:last-child)
margin-bottom: 20px
code
border-radius: $radius
img
display: inline-block
vertical-align: top
+tablet
align-items: center
display: flex
justify-content: space-between
& > .navbar-item
&:not(.is-narrow)
flex: 1
.navbar-left,
.navbar-right
.navbar-item
&.is-flexible
flex: 1
&:not(:last-child)
margin-right: 10px
.navbar-left
+mobile
& + .navbar-right
margin-top: 20px
+tablet
align-items: center
display: flex
.navbar-right
+tablet
align-items: center
display: flex
justify-content: flex-end

73
bulma/components/table.sass Normal file
View File

@ -0,0 +1,73 @@
.table
background: white
margin-bottom: 20px
width: 100%
th,
td
border: 1px solid $border
border-width: 0 0 1px
padding: 8px 10px
vertical-align: top
&.table-link
padding: 0
& > a
display: block
padding: 8px 10px
&:hover
background: $link
color: $link-invert
&.table-icon
padding: 5px
text-align: center
white-space: nowrap
width: 1%
.fa
+fa(21px, 24px)
&.table-link
padding: 0
& > a
padding: 5px
th
color: $text-strong
text-align: left
tr
&:hover
background: rgba($background, 0.5)
color: $text-strong
&:last-child td
border-bottom-width: 0
thead
th,
td
border-width: 0 0 2px
tfoot
th,
td
border-width: 2px 0 0
&.is-bordered
th,
td
border-width: 1px
tr
&:last-child td
border-bottom-width: 1px
&.is-narrow
th,
td
padding: 5px 10px
&.table-link
padding: 0
& > a
padding: 5px 10px
&.table-icon
padding: 2px
&.table-link
padding: 0
& > a
padding: 2px
&.is-striped
tbody
tr:nth-child(2n)
background: rgba($background, 0.5)
&:hover
background: $background

84
bulma/components/tabs.sass Normal file
View File

@ -0,0 +1,84 @@
.tabs
line-height: 24px
overflow: hidden
overflow-x: auto
white-space: nowrap
&:not(:last-child)
margin-bottom: 20px
.fa
line-height: 24px
margin: 0 -2px
width: 24px
a
border-bottom: 1px solid $border
color: $text
display: block
margin-bottom: -1px
padding: 5px 0
vertical-align: top
&:hover
border-bottom-color: $text-strong
color: $text-strong
li
display: inline-block
vertical-align: top
& + li
margin-left: 20px
&.is-active
a
border-bottom-color: $link
color: $link
ul
border-bottom: 1px solid $border
&.is-boxed
a
border: 1px solid transparent
border-radius: $radius $radius 0 0
padding: 5px 15px
&:hover
background: $background
border-bottom-color: $border
li
& + li
margin-left: 5px
&.is-active
a
background: white
border-color: $border
border-bottom-color: transparent
&.is-toggle
ul
border-bottom: none
display: flex
a
border: 1px solid $border
margin-bottom: 0
padding: 5px 10px
position: relative
&:hover
background: $background
border-color: $border-hover
z-index: 2
li
& + li
margin-left: -1px
&:first-child a
border-radius: $radius 0 0 $radius
&:last-child a
border-radius: 0 $radius $radius 0
&.is-active
a
background: $primary
border-color: $primary
color: $primary-invert
z-index: 1
&.is-fullwidth
+tablet
ul
display: flex
justify-content: center
text-align: center
li
flex: 1
& + li
margin-left: 0

74
bulma/config/generated-variables.sass Normal file
View File

@ -0,0 +1,74 @@
// Colors
$primary-invert: findColorInvert($primary)
$info: $blue
$info-invert: findColorInvert($info)
$success: $green
$success-invert: findColorInvert($success)
$warning: $yellow
$warning-invert: findColorInvert($warning)
$danger: $red
$danger-invert: findColorInvert($danger)
$colors: (primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert))
$body-background: $grey-lighter
$background: $grey-lighter
$border: $grey-light
$border-hover: $grey
// Text
$text: $grey-dark
$text-invert: findColorInvert($text)
$text-light: $grey
$text-strong: $grey-darker
// Code
$code: $info
$code-background: $background
$pre: $text
$pre-background: $background
// Links
$link: $primary
$link-invert: $primary-invert
$link-visited: $purple
$link-hover: $grey-darker
$link-hover-background: $grey-lighter
$link-hover-border: $grey-darker
$link-active: $grey-darker
$link-active-border: $grey-darker
// Controls
$control: $text-strong
$control-background: $text-invert
$control-border: $border
$control-hover: $link-hover
$control-hover-border: $border-hover
$control-active: $link
$control-active-background: $link
$control-active-background-invert: $link-invert
$control-active-border: $link
// Typography
$family-primary: $family-sans-serif
$size-small: $size-7
$size-normal: $size-6
$size-medium: $size-5
$size-large: $size-3
$size-huge: $size-1
$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6

41
bulma/config/variables.sass Normal file
View File

@ -0,0 +1,41 @@
// Colors
$grey-darker: #222324
$grey-dark: #69707a
$grey: #aeb1b5
$grey-light: #d3d6db
$grey-lighter: #ebeff5
$grey-lighter: #f5f7fa
$blue: #42afe3
$green: #97cd76
$orange: #f68b39
$purple: #847bb9
$red: #ed6c63
$turquoise: #1fc8db
$yellow: #fce473
$primary: $turquoise
// Typography
$family-sans-serif: "Helvetica Neue", "Helvetica", "Arial", sans-serif
$size-1: 48px
$size-2: 40px
$size-3: 28px
$size-4: 24px
$size-5: 18px
$size-6: 14px
$size-7: 11px
// Dimensions
$header-height: 50px
// Miscellaneous
$easing: ease-out
$radius: 3px
$speed: 86ms

96
bulma/elements/buttons.sass Normal file
View File

@ -0,0 +1,96 @@
=button-small
border-radius: 2px
font-size: 11px
height: 24px
line-height: 16px
padding: 3px 6px
=button-medium
font-size: 18px
height: 40px
padding: 7px 14px
=button-large
font-size: 22px
height: 48px
padding: 11px 20px
.button
+control
padding: 3px 10px
strong
color: inherit
small
display: block
font-size: $size-small
line-height: 1
margin-top: 5px
.fa
line-height: 24px
margin: 0 -2px
width: 24px
&:hover
color: $control-hover
&:active
box-shadow: inset 0 1px 2px rgba(black, 0.2)
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background: $color
border-color: transparent
color: $color-invert
&:hover,
&:focus
background: darken($color, 10%)
border-color: transparent
color: $color-invert
&:active
border-color: transparent
&.is-outlined
background: transparent
border-color: $color
color: $color
&:hover,
&:focus
border-color: darken($color, 10%)
color: darken($color, 10%)
&.is-inverted
background: $color-invert
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)
&.is-loading:after
border-color: transparent transparent $color-invert $color-invert !important
&.is-small
+button-small
&.is-medium
+button-medium
&.is-large
+button-large
&.is-flexible
height: auto
&.is-loading
color: transparent
pointer-events: none
&:after
@extend .loader
+center(16px)
position: absolute !important
&.is-disabled,
&[disabled]
opacity: 0.5
pointer-events: none
+tablet
small
color: $text
left: 0
margin-top: 10px
position: absolute
top: 100%
width: 100%

213
bulma/elements/controls.sass Normal file
View File

@ -0,0 +1,213 @@
=control
-moz-appearance: none
-webkit-appearance: none
background: $control-background
border: 1px solid $control-border
border-radius: $radius
color: $control
display: inline-block
font-size: $size-normal
height: 32px
line-height: 24px
padding: 3px 8px
position: relative
vertical-align: top
&:hover
border-color: $control-hover-border
&:active,
&:focus
border-color: $control-active-border
outline: none
&[disabled]
&,
&:hover
background: $background
border-color: $control-border
+placeholder
color: rgba($control, 0.3)
=control-small
border-radius: 2px
font-size: 11px
height: 24px
line-height: 16px
padding: 3px 6px
=control-medium
font-size: 18px
height: 40px
line-height: 32px
padding: 3px 10px
=control-large
font-size: 24px
height: 48px
line-height: 40px
padding: 3px 12px
.input
+control
box-shadow: inset 0 1px 2px rgba(black, 0.1)
display: block
max-width: 100%
width: 100%
&[type="search"]
border-radius: 290486px
&.is-small
+control-small
&.is-medium
+control-medium
&.is-large
+control-large
&.is-fullwidth
display: block
width: 100%
&.is-inline
display: inline
width: auto
.textarea
@extend .input
line-height: 1.2
max-height: 600px
max-width: 100%
min-height: 120px
min-width: 100%
padding: 10px
resize: vertical
%control-with-element
cursor: pointer
display: inline-block
line-height: 16px
padding-left: 18px
position: relative
vertical-align: top
input
+control
border-radius: 1px
box-shadow: inset 0 1px 1px rgba(black, 0.1)
cursor: pointer
float: left
height: 14px
left: 0
outline: none
padding: 0
position: absolute
top: 1px
width: 14px
&:after
+arrow($control-active-background-invert)
height: 4px
left: 3px
opacity: 0
position: absolute
top: 3px
transform: rotate(-45deg) scale(1)
&:checked
background: $control-active-background
border-color: $control-active-background
box-shadow: none
&:after
opacity: 1
&:hover
color: $control-hover
input
border-color: $control-hover-border
&:checked
border-color: $control-active-border
&.is-disabled
&,
&:hover
color: $text-light
.checkbox
@extend %control-with-element
.radio
@extend %control-with-element
& + .radio
margin-left: 10px
input
border-radius: 8px
&:after
background: $link-invert
border: 0
border-radius: 2px
left: 4px
top: 4px
transform: none
width: 4px
.select
display: inline-block
height: 32px
position: relative
vertical-align: top
select
+control
cursor: pointer
display: block
outline: none
padding-right: 36px
&:hover
border-color: $control-hover-border
&:after
+arrow($link)
margin-top: -6px
right: 16px
top: 50%
&:hover
&:after
border-color: $link-hover
.control
position: relative
&.is-loading
&:after
@extend .loader
position: absolute !important
right: 8px
top: 8px
&:not(:last-child)
margin-bottom: 10px
&.is-withicon
.fa
+fa(14px, 20px)
color: $text-light
left: 6px
pointer-events: none
position: absolute
top: 6px
z-index: 1
.input
padding-left: 32px
&:focus + .fa
color: $control-active
&.is-horizontal
display: flex
& > .button,
& > .input,
& > .select
&:not(:last-child)
margin-right: 10px
& > .input
flex: 1
&.is-grouped
display: flex
.input,
.button,
.select
border-radius: 0
margin-right: -1px
&:hover
z-index: 2
&:active,
&:focus
z-index: 3
&:first-child
border-radius: $radius 0 0 $radius
select
border-radius: $radius 0 0 $radius
&:last-child
border-radius: 0 $radius $radius 0
&.is-centered
justify-content: center

172
bulma/elements/elements.sass Normal file
View File

@ -0,0 +1,172 @@
@charset "utf-8"
@import controls
@import buttons
@import titles
@import messages
@import notifications
.highlight
font-size: 12px
font-weight: normal
max-width: 100%
overflow: hidden
padding: 0
&:not(:last-child)
margin-bottom: 20px
pre
overflow: auto
max-width: 100%
.delete
background: rgba(black, 0.2)
border-radius: 290486px
cursor: pointer
display: inline-block
height: 24px
position: relative
vertical-align: top
width: 24px
&:before,
&:after
background: white
content: ""
display: block
height: 2px
left: 6px
position: absolute
top: 11px
width: 12px
&:before
transform: rotate(45deg)
&:after
transform: rotate(-45deg)
&:hover
background: rgba(black, 0.5)
&.is-small
height: 16px
width: 16px
&:before,
&:after
left: 4px
top: 7px
width: 8px
.icon
+fa(21px, 24px)
.fa
font-size: inherit
line-height: inherit
&.is-small
+fa(14px, 20px)
&.is-medium
+fa(28px, 32px)
&.is-large
+fa(42px, 48px)
.hamburger
cursor: pointer
display: block
height: $header-height
padding: 19px 17px
position: relative
width: $header-height
span
background: $text
display: block
height: 1px
left: 17px
position: absolute
transition: none $speed $easing
transition-property: background, left, opacity, transform
width: 15px
&:nth-child(1)
top: 19px
&:nth-child(2)
top: 24px
&:nth-child(3)
bottom: 20px
&:hover
background: $background
&.is-active
span
background: $link
&:nth-child(1)
left: 20px
transform: rotate(45deg)
transform-origin: left top
&:nth-child(2)
opacity: 0
&:nth-child(3)
left: 20px
transform: rotate(-45deg)
transform-origin: left bottom
.heading
display: block
font-size: 11px
letter-spacing: 1px
margin-bottom: 5px
text-transform: uppercase
.loader
animation: spin-around 500ms infinite linear
border: 2px solid $border
border-radius: 290486px
border-right-color: transparent
border-top-color: transparent
content: ""
display: block
height: 16px
position: relative
width: 16px
.number
background: $background
border-radius: 290486px
display: inline-block
font-size: $size-medium
vertical-align: top
.tag
background: $background
border-radius: $radius
box-shadow: inset 0 -1px 0 rgba(black, 0.1)
color: $text
display: inline-block
font-size: 12px
height: 24px
line-height: 16px
padding: 4px 10px
vertical-align: top
white-space: nowrap
&.is-dark
background: $text
color: $text-invert
&.is-rounded
border-radius: 290486px
&.is-medium
box-shadow: inset 0 -2px 0 rgba(black, 0.1)
font-size: $size-normal
height: 32px
padding: 7px 14px 9px
&:not(.is-large)
.delete
@extend .delete.is-small
margin-left: 4px
margin-right: -6px
&.is-large
box-shadow: inset 0 -2px 0 rgba(black, 0.1)
font-size: $size-5
height: 40px
line-height: 24px
padding: 7px 18px 9px
.delete
margin-left: 4px
margin-right: -8px
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background: $color
color: $color-invert

41
bulma/elements/messages.sass Normal file
View File

@ -0,0 +1,41 @@
.message-body
border: 1px solid $border
border-radius: $radius
padding: 12px 15px
strong
color: inherit
.message-header
background: $text
border-radius: $radius $radius 0 0
color: $text-invert
font-size: 10px
font-weight: bold
letter-spacing: 1px
padding: 3px 8px
text-transform: uppercase
& + .message-body
border-radius: 0 0 $radius $radius
border-top: none
.message
background: $background
border-radius: $radius
&:not(:last-child)
margin-bottom: 20px
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
$lightning: (100% - lightness($color)) - 4%
$darkness: max(lightness($color) - 10%, lightness($color))
&.is-#{$name}
background: lighten($color, $lightning)
.message-header
background: $color
color: $color-invert
.message-body
border-color: $color
@if (colorLuminance($color) > 0.8)
color: desaturate(lighten(darken($color, 100%), 40%), 40%)
@else
color: desaturate(lighten(darken($color, 100%), 50%), 30%)

20
bulma/elements/notifications.sass Normal file
View File

@ -0,0 +1,20 @@
.notification
+clearfix
background: $background
border-radius: $radius
padding: 16px 20px
position: relative
&:not(:last-child)
margin-bottom: 20px
.title
color: inherit
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background: $color
color: $color-invert
.delete
border-radius: 0 $radius
float: right
margin: -16px -20px 0 20px

57
bulma/elements/titles.sass Normal file
View File

@ -0,0 +1,57 @@
.title,
.subtitle
font-weight: 300
&:not(:last-child)
margin-bottom: 20px
.title
color: $text-strong
font-size: $size-large
line-height: 1
strong
color: inherit
code
display: inline-block
font-size: $size-large
& + .subtitle
margin-top: -10px
& + .highlight
margin-top: -10px
&.is-normal
font-weight: 400
strong
font-weight: 700
@each $size in $sizes
$i: index($sizes, $size)
&.is-#{$i}
font-size: $size
code
font-size: nth($sizes, min($i + 1, 6))
+tablet
& + .subtitle
margin-top: -15px
.subtitle
font-size: $size-medium
line-height: 1.125
strong
color: $text-strong
font-weight: 400
code
border-radius: $radius
display: inline-block
font-size: $size-normal
padding: 2px 3px
vertical-align: top
& + .text
margin-top: 20px
&.is-normal
font-weight: 400
strong
font-weight: 700
@each $size in $sizes
$i: index($sizes, $size)
&.is-#{$i}
font-size: $size
code
font-size: nth($sizes, min($i + 1, 6))

11
bulma/layout/footer.sass Normal file
View File

@ -0,0 +1,11 @@
.footer
background: $background
padding: 40px 20px 80px
a
color: $text
&:hover
color: $text-strong
&:not(.icon)
border-bottom: 1px solid $border
&:hover
border-bottom-color: $link

149
bulma/layout/header.sass Normal file
View File

@ -0,0 +1,149 @@
.header
+clearfix
background: white
box-shadow: 0 1px 2px rgba(black, 0.1)
height: $header-height
line-height: 24px
position: relative
text-align: center
z-index: 2
.container
align-items: center
box-shadow: 0 1px 0 rgba($border, 0.3)
display: flex
height: $header-height
.header-toggle
@extend .hamburger
+tablet
display: none
// Elements
.header-item
display: block
padding: 0 10px
a
color: $text
&:hover
color: $link-hover
&.is-active
color: $link-active
.fa
font-size: 21px
line-height: 24px
.header-icon
+fa(14px, 24px)
color: $text
margin: 0 5px
&:hover
color: $link-hover
.header-tab
border-bottom: 1px solid transparent
color: $text
display: block
height: $header-height
line-height: 24px
padding: 13px 15px
&:hover
border-bottom: 1px solid $link
&.is-active
border-bottom: 3px solid $link
color: $link
.header-logo
align-items: center
display: flex
img
max-height: 24px
+touch
padding: 0 10px
+tablet
padding-right: 10px
// Containers
.header-left
align-items: center
display: flex
flex: 1
overflow: hidden
overflow-x: auto
white-space: nowrap
.header-center
align-items: center
display: flex
height: $header-height
left: 50%
position: absolute
transform: translateX(-50%)
.header-right
align-items: center
+tablet
display: flex
+desktop
.header-item:last-child
padding-right: 0
.header-full
align-items: stretch
display: flex
height: $header-height
justify-content: center
text-align: center
width: 100%
& > .header-item
align-items: stretch
display: flex
flex: 1
justify-content: center
padding: 0
& > a
align-items: center
display: flex
justify-content: center
width: 100%
.header-menu
+mobile
background: white
box-shadow: 0 4px 7px rgba(black, 0.1)
display: none
position: absolute
right: 0
top: $header-height
z-index: 100
.header-item
border-top: 1px solid rgba($border, 0.5)
padding: 10px
&.is-active
display: block
// States
.header.is-centered
justify-content: center
.header-left,
.header-center,
.header-right
justify-content: center
.header.is-small
background: $background
box-shadow: none
height: 40px
z-index: 1
.container
height: 40px
.header-tab
font-size: 13px
height: 40px
padding: 8px 10px
&:hover,
&.is-active
border-bottom-width: 2px

143
bulma/layout/hero.sass Normal file
View File

@ -0,0 +1,143 @@
.hero
background: white
text-align: center
& > .container
padding: 40px 20px
a
color: inherit
.header
background: none
box-shadow: none
.tabs
ul
border-bottom: none
a
border: none
margin-bottom: 0
padding: 0 0 10px
&.is-boxed
a
border: none
padding: 6px 12px
+desktop
& > .container
padding: 40px 0
&.is-alt
background: $background
color: $text-light
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background: $color
color: $color-invert
.title
color: $color-invert
strong
color: inherit
.subtitle
color: rgba($color-invert, 0.7)
strong
color: $color-invert
.header .container
box-shadow: 0 1px 0 rgba($color-invert, 0.2)
.header-icon,
.header-item > a:not(.button)
color: $color-invert
opacity: 0.5
&:hover,
&.is-active
opacity: 1
.tabs
a
color: $color-invert
opacity: 0.5
&:hover
opacity: 1
li.is-active a
opacity: 1
&.is-boxed
a
color: $color-invert
&:hover
background: rgba(black, 0.1)
li.is-active a
&,
&:hover
background: $color-invert
color: $color
&.is-bold
$gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
$gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
+mobile
.header-toggle
span
background: $color-invert
&:hover
background: rgba(black, 0.1)
&.is-active
span
background: $color-invert
.header-menu
background: $color
.header-item
border-top-color: rgba($color-invert, 0.2)
&.is-fullheight,
&.is-medium,
&.is-large
+tablet
.title
font-size: $size-huge
.subtitle
font-size: $size-large
.tabs
font-size: $size-medium
a
padding-bottom: 15px
&.is-boxed
a
padding: 12px 16px
&.is-fullheight
align-items: center
display: flex
height: 100vh
.tabs
white-space: normal
&.is-medium
+tablet
& > .container
padding: 120px 20px
.title
font-size: 40px
.subtitle
font-size: 24px
.tabs
font-size: 16px
+desktop
& > .container
padding: 120px 0
&.is-large
+tablet
& > .container
padding: 240px 20px
+desktop
& > .container
padding: 240px 0
&.is-left
text-align: left
&.is-right
text-align: right
.hero-buttons
margin-top: 20px
+mobile
.button
display: block
&:not(:last-child)
margin-bottom: 10px
+tablet
display: flex
justify-content: center
.button:not(:last-child)
margin-right: 20px

6
bulma/layout/layout.sass Normal file
View File

@ -0,0 +1,6 @@
@charset "utf-8"
@import header
@import hero
@import section
@import footer

11
bulma/layout/section.sass Normal file
View File

@ -0,0 +1,11 @@
.section
background: white
padding: 40px 20px
& + .section
border-top: 1px solid rgba($border, 0.5)
+desktop
padding: 40px 0
&.is-medium
padding: 120px 0
&.is-large
padding: 240px 0

5
bulma/utilities/animations.sass Normal file
View File

@ -0,0 +1,5 @@
@keyframes spin-around
from
transform: rotate(0deg)
to
transform: rotate(359deg)

34
bulma/utilities/functions.sass Normal file
View File

@ -0,0 +1,34 @@
@function powerNumber($number, $exp)
$value: 1
@if $exp > 0
@for $i from 1 through $exp
$value: $value * $number
@else if $exp < 0
@for $i from 1 through -$exp
$value: $value / $number
@return $value
@function colorLuminance($color)
$colors: ('red': red($color),'green': green($color),'blue': blue($color))
@each $name, $value in $colors
$adjusted: 0
$value: $value / 255
@if $value < 0.03928
$value: $value / 12.92
@else
$value: ($value + .055) / 1.055
$value: powerNumber($value, 2)
$colors: map-merge($colors, ($name: $value))
@return (map-get($colors, 'red') * .2126) + (map-get($colors, 'green') * .7152) + (map-get($colors, 'blue') * .0722)
@function closestEvenNumber($number)
@if ($number % 2 == 0px)
@return $number
@else
@return ($number + 1px)
@function findColorInvert($color)
@if (colorLuminance($color) > 0.8)
@return rgba(black, 0.5)
@else
@return white

83
bulma/utilities/mixins.sass Normal file
View File

@ -0,0 +1,83 @@
=arrow($color)
border: 1px solid $color
border-right: 0
border-top: 0
content: " "
display: block
height: 7px
pointer-events: none
position: absolute
transform: rotate(-45deg)
width: 7px
=clearfix
&:after
clear: both
content: " "
display: table
=center($size)
left: 50%
margin-left: -($size / 2)
margin-top: -($size / 2)
position: absolute
top: 50%
=fa($size, $dimensions)
display: inline-block
font-size: $size
height: $dimensions
line-height: $dimensions
text-align: center
vertical-align: top
width: $dimensions
=overlay($offset: 0)
bottom: $offset
left: $offset
position: absolute
right: $offset
top: $offset
=placeholder
$placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input'
@each $placeholder in $placeholders
&:#{$placeholder}-placeholder
@content
=replace($background, $width, $height)
background: $background center center no-repeat
background-size: $width $height
display: block
height: $height
outline: none
overflow: hidden
text-indent: -290486px
width: $width
$tablet: 769px
$desktop: 980px
=from($device)
@media screen and (min-width: $device)
@content
=until($device)
@media screen and (max-width: $device - 1px)
@content
=mobile
@media screen and (max-width: $tablet - 1px)
@content
=tablet
@media screen and (min-width: $tablet)
@content
=touch
@media screen and (max-width: $desktop - 1px)
@content
=desktop
@media screen and (min-width: $desktop)
@content

174
bulma/utilities/reset.sass Normal file
View File

@ -0,0 +1,174 @@
//
// HTML5 Reset :: style.css
// ----------------------------------------------------------
// We have learned much from/been inspired by/taken code where offered from:
//
// Eric Meyer :: http://meyerweb.com
// HTML5 Doctor :: http://html5doctor.com
// and the HTML5 Boilerplate :: http://html5boilerplate.com
//
//-------------------------------------------------------------------------------
// Let's default this puppy out
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary
margin: 0
padding: 0
border: 0
font-size: 100%
font-weight: normal
vertical-align: baseline
background: transparent
article, aside, figure, footer, header, nav, section, details, summary
display: block
// Handle box-sizing while better addressing child elements:
// http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
html
box-sizing: border-box
*,
*:before,
*:after
box-sizing: inherit
// consider resetting the default cursor: https://gist.github.com/murtaugh/5247154
// Responsive images and other embedded objects
img,
object,
embed
max-width: 100%
//
// Note: keeping IMG here will cause problems if you're using foreground images as sprites.
// In fact, it *will* cause problems with Google Maps' controls at small size.
// If this is the case for you, try uncommenting the following:
//
//#map img {
// max-width: none;
//}
// force a vertical scrollbar to prevent a jumpy page
html
overflow-y: scroll
// we use a lot of ULs that aren't bulleted.
// don't forget to restore the bullets within content.
ul
list-style: none
blockquote, q
quotes: none
blockquote:before,
blockquote:after,
q:before,
q:after
content: ''
content: none
a
margin: 0
padding: 0
font-size: 100%
vertical-align: baseline
background: transparent
del
text-decoration: line-through
abbr[title], dfn[title]
border-bottom: 1px dotted #000
cursor: help
// tables still need cellspacing="0" in the markup
table
border-collapse: collapse
border-spacing: 0
th
font-weight: bold
vertical-align: bottom
td
font-weight: normal
vertical-align: top
hr
display: block
height: 1px
border: 0
border-top: 1px solid #ccc
margin: 1em 0
padding: 0
input, select
vertical-align: middle
pre
white-space: pre
// CSS2
white-space: pre-wrap
// CSS 2.1
white-space: pre-line
// CSS 3 (and 2.1 as well, actually)
word-wrap: break-word
// IE
input[type="radio"]
vertical-align: text-bottom
input[type="checkbox"]
vertical-align: bottom
select, input, textarea
font: 99% sans-serif
table
font-size: inherit
font: 100%
small
font-size: 85%
strong
font-weight: bold
td, td img
vertical-align: top
// Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930
sub, sup
font-size: 75%
line-height: 0
position: relative
sup
top: -0.5em
sub
bottom: -0.25em
// standardize any monospaced elements
pre, code, kbd, samp
font-family: monospace, sans-serif
// hand cursor on clickable elements
label,
input[type=button],
input[type=submit],
input[type=file],
button
cursor: pointer
// Webkit browsers add a 2px margin outside the chrome of form elements
button, input, select, textarea
margin: 0
// make buttons play nice in IE
button,
input[type=button]
width: auto
overflow: visible

6
bulma/utilities/utilities.sass Normal file
View File

@ -0,0 +1,6 @@
@charset "utf-8"
@import reset
@import functions
@import mixins
@import animations

2954
css/bulma.css vendored Normal file
View File

File diff suppressed because it is too large Load Diff

1
css/bulma.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long