mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Init
This commit is contained in:
jgthms
commit
5384d1531f
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
.sass-cache
|
||||
.DS_Store
|
||||
21
LICENSE
Normal file
21
LICENSE
Normal 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
7
README.md
Normal 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
9
bulma.sass
vendored
Normal 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
6
bulma/base/base.sass
Normal file
@ -0,0 +1,6 @@
|
||||
@charset "utf-8"
|
||||
|
||||
@import generic
|
||||
@import content
|
||||
@import highlight
|
||||
@import helpers
|
||||
51
bulma/base/content.sass
Normal file
51
bulma/base/content.sass
Normal 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
101
bulma/base/generic.sass
Normal 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
27
bulma/base/helpers.sass
Normal 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
123
bulma/base/highlight.sass
Normal 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
36
bulma/components/card.sass
Normal 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
11
bulma/components/components.sass
Normal 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
48
bulma/components/grid.sass
Normal 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
69
bulma/components/media.sass
Normal 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
25
bulma/components/menu.sass
Normal 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
45
bulma/components/navbar.sass
Normal 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
73
bulma/components/table.sass
Normal 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
84
bulma/components/tabs.sass
Normal 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
74
bulma/config/generated-variables.sass
Normal 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
41
bulma/config/variables.sass
Normal 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
96
bulma/elements/buttons.sass
Normal 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
213
bulma/elements/controls.sass
Normal 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
172
bulma/elements/elements.sass
Normal 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
41
bulma/elements/messages.sass
Normal 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
20
bulma/elements/notifications.sass
Normal 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
57
bulma/elements/titles.sass
Normal 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
11
bulma/layout/footer.sass
Normal 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
149
bulma/layout/header.sass
Normal 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
143
bulma/layout/hero.sass
Normal 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
6
bulma/layout/layout.sass
Normal file
@ -0,0 +1,6 @@
|
||||
@charset "utf-8"
|
||||
|
||||
@import header
|
||||
@import hero
|
||||
@import section
|
||||
@import footer
|
||||
11
bulma/layout/section.sass
Normal file
11
bulma/layout/section.sass
Normal 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
5
bulma/utilities/animations.sass
Normal file
@ -0,0 +1,5 @@
|
||||
@keyframes spin-around
|
||||
from
|
||||
transform: rotate(0deg)
|
||||
to
|
||||
transform: rotate(359deg)
|
||||
34
bulma/utilities/functions.sass
Normal file
34
bulma/utilities/functions.sass
Normal 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
83
bulma/utilities/mixins.sass
Normal 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
174
bulma/utilities/reset.sass
Normal 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
6
bulma/utilities/utilities.sass
Normal file
@ -0,0 +1,6 @@
|
||||
@charset "utf-8"
|
||||
|
||||
@import reset
|
||||
@import functions
|
||||
@import mixins
|
||||
@import animations
|
||||
2954
css/bulma.css
vendored
Normal file
2954
css/bulma.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
1
css/bulma.min.css
vendored
Normal file
1
css/bulma.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user