bulma-sass 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.gitignore +9 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +21 -0
- data/README.md +29 -0
- data/Rakefile +2 -0
- data/app/assets/stylesheets/bulma.sass +9 -0
- data/app/assets/stylesheets/bulma/base/base.sass +6 -0
- data/app/assets/stylesheets/bulma/base/content.sass +51 -0
- data/app/assets/stylesheets/bulma/base/generic.sass +101 -0
- data/app/assets/stylesheets/bulma/base/helpers.sass +27 -0
- data/app/assets/stylesheets/bulma/base/highlight.sass +123 -0
- data/app/assets/stylesheets/bulma/components/card.sass +36 -0
- data/app/assets/stylesheets/bulma/components/components.sass +11 -0
- data/app/assets/stylesheets/bulma/components/grid.sass +48 -0
- data/app/assets/stylesheets/bulma/components/media.sass +69 -0
- data/app/assets/stylesheets/bulma/components/menu.sass +25 -0
- data/app/assets/stylesheets/bulma/components/navbar.sass +45 -0
- data/app/assets/stylesheets/bulma/components/table.sass +73 -0
- data/app/assets/stylesheets/bulma/components/tabs.sass +84 -0
- data/app/assets/stylesheets/bulma/config/generated-variables.sass +74 -0
- data/app/assets/stylesheets/bulma/config/variables.sass +41 -0
- data/app/assets/stylesheets/bulma/elements/buttons.sass +96 -0
- data/app/assets/stylesheets/bulma/elements/controls.sass +213 -0
- data/app/assets/stylesheets/bulma/elements/elements.sass +172 -0
- data/app/assets/stylesheets/bulma/elements/messages.sass +41 -0
- data/app/assets/stylesheets/bulma/elements/notifications.sass +20 -0
- data/app/assets/stylesheets/bulma/elements/titles.sass +57 -0
- data/app/assets/stylesheets/bulma/layout/footer.sass +11 -0
- data/app/assets/stylesheets/bulma/layout/header.sass +149 -0
- data/app/assets/stylesheets/bulma/layout/hero.sass +143 -0
- data/app/assets/stylesheets/bulma/layout/layout.sass +6 -0
- data/app/assets/stylesheets/bulma/layout/section.sass +11 -0
- data/app/assets/stylesheets/bulma/utilities/animations.sass +5 -0
- data/app/assets/stylesheets/bulma/utilities/functions.sass +34 -0
- data/app/assets/stylesheets/bulma/utilities/mixins.sass +83 -0
- data/app/assets/stylesheets/bulma/utilities/reset.sass +174 -0
- data/app/assets/stylesheets/bulma/utilities/utilities.sass +6 -0
- data/bulma-sass.gemspec +25 -0
- data/lib/bulma-sass.rb +7 -0
- data/lib/bulma/sass/engine.rb +6 -0
- data/lib/bulma/sass/version.rb +5 -0
- metadata +113 -0
@@ -0,0 +1,48 @@
|
|
1
|
+
.column
|
2
|
+
+mobile
|
3
|
+
& + .column
|
4
|
+
margin-top: 20px
|
5
|
+
+tablet
|
6
|
+
flex: 1
|
7
|
+
& + .column
|
8
|
+
margin-left: 20px
|
9
|
+
&.is-double
|
10
|
+
flex: 2
|
11
|
+
&.is-triple
|
12
|
+
flex: 3
|
13
|
+
&.is-quadruple
|
14
|
+
flex: 4
|
15
|
+
&.is-half
|
16
|
+
flex: none
|
17
|
+
width: 50%
|
18
|
+
&.is-third
|
19
|
+
flex: none
|
20
|
+
width: 33.3333%
|
21
|
+
&.is-quarter
|
22
|
+
flex: none
|
23
|
+
width: 25%
|
24
|
+
@for $i from 1 through 11
|
25
|
+
&.is-#{$i}
|
26
|
+
flex: none
|
27
|
+
width: ($i / 12) * 100%
|
28
|
+
|
29
|
+
.columns
|
30
|
+
&:not(:last-child)
|
31
|
+
margin-bottom: 20px
|
32
|
+
+tablet
|
33
|
+
display: flex
|
34
|
+
&.is-gapless
|
35
|
+
& > .column + .column
|
36
|
+
margin-left: 0
|
37
|
+
&.is-vcentered
|
38
|
+
align-items: center
|
39
|
+
&.is-grid
|
40
|
+
+tablet
|
41
|
+
flex-wrap: wrap
|
42
|
+
& > .column
|
43
|
+
flex-basis: 33.3333%
|
44
|
+
max-width: 33.3333%
|
45
|
+
padding: 10px
|
46
|
+
width: 33.3333%
|
47
|
+
& + .column
|
48
|
+
margin-left: 0
|
@@ -0,0 +1,69 @@
|
|
1
|
+
.media-image
|
2
|
+
&.is-32
|
3
|
+
width: 32px
|
4
|
+
&.is-40
|
5
|
+
width: 40px
|
6
|
+
+mobile
|
7
|
+
margin-bottom: 10px
|
8
|
+
+tablet
|
9
|
+
margin-right: 10px
|
10
|
+
width: 60px
|
11
|
+
|
12
|
+
.media-number
|
13
|
+
background: $background
|
14
|
+
border-radius: 290486px
|
15
|
+
display: inline-block
|
16
|
+
font-size: $size-medium
|
17
|
+
height: 32px
|
18
|
+
line-height: 24px
|
19
|
+
min-width: 32px
|
20
|
+
padding: 4px 8px
|
21
|
+
text-align: center
|
22
|
+
vertical-align: top
|
23
|
+
+mobile
|
24
|
+
margin-bottom: 10px
|
25
|
+
+tablet
|
26
|
+
margin-right: 10px
|
27
|
+
|
28
|
+
.media-content
|
29
|
+
flex: 1
|
30
|
+
.textarea
|
31
|
+
min-height: 60px
|
32
|
+
|
33
|
+
.media
|
34
|
+
align-items: flex-start
|
35
|
+
.content:not(:last-child)
|
36
|
+
margin-bottom: 10px
|
37
|
+
.media
|
38
|
+
border-top: 1px solid rgba($border, 0.5)
|
39
|
+
display: flex
|
40
|
+
padding-top: 10px
|
41
|
+
.media-image
|
42
|
+
margin-bottom: 0
|
43
|
+
margin-right: 10px
|
44
|
+
width: 40px
|
45
|
+
.textarea
|
46
|
+
+control-small
|
47
|
+
.button
|
48
|
+
+button-small
|
49
|
+
.content:not(:last-child),
|
50
|
+
.control:not(:last-child)
|
51
|
+
margin-bottom: 5px
|
52
|
+
.media
|
53
|
+
font-size: 12px
|
54
|
+
padding-top: 5px
|
55
|
+
& + .media
|
56
|
+
margin-top: 5px
|
57
|
+
& + .media
|
58
|
+
border-top: 1px solid rgba($border, 0.5)
|
59
|
+
margin-top: 10px
|
60
|
+
padding-top: 10px
|
61
|
+
&.is-large
|
62
|
+
& + .media
|
63
|
+
margin-top: 20px
|
64
|
+
padding-top: 20px
|
65
|
+
+tablet
|
66
|
+
display: flex
|
67
|
+
&.is-large
|
68
|
+
.media-number
|
69
|
+
margin-right: 20px
|
@@ -0,0 +1,25 @@
|
|
1
|
+
.menu
|
2
|
+
border: 1px solid $border
|
3
|
+
|
4
|
+
.menu-heading
|
5
|
+
@extend .heading
|
6
|
+
color: $text-strong
|
7
|
+
|
8
|
+
.menu-list
|
9
|
+
a
|
10
|
+
color: $text
|
11
|
+
&:hover
|
12
|
+
color: $link
|
13
|
+
|
14
|
+
.menu-block
|
15
|
+
.checkbox
|
16
|
+
border: 1px solid transparent
|
17
|
+
border-radius: $radius
|
18
|
+
display: block
|
19
|
+
padding: 8px
|
20
|
+
padding-left: 32px
|
21
|
+
input
|
22
|
+
left: 9px
|
23
|
+
top: 9px
|
24
|
+
&:hover
|
25
|
+
border-color: $link
|
@@ -0,0 +1,45 @@
|
|
1
|
+
.navbar-item
|
2
|
+
.title,
|
3
|
+
.subtitle
|
4
|
+
margin-bottom: 0
|
5
|
+
+mobile
|
6
|
+
&:not(:last-child)
|
7
|
+
margin-bottom: 10px
|
8
|
+
|
9
|
+
.navbar
|
10
|
+
&:not(:last-child)
|
11
|
+
margin-bottom: 20px
|
12
|
+
code
|
13
|
+
border-radius: $radius
|
14
|
+
img
|
15
|
+
display: inline-block
|
16
|
+
vertical-align: top
|
17
|
+
+tablet
|
18
|
+
align-items: center
|
19
|
+
display: flex
|
20
|
+
justify-content: space-between
|
21
|
+
& > .navbar-item
|
22
|
+
&:not(.is-narrow)
|
23
|
+
flex: 1
|
24
|
+
|
25
|
+
.navbar-left,
|
26
|
+
.navbar-right
|
27
|
+
.navbar-item
|
28
|
+
&.is-flexible
|
29
|
+
flex: 1
|
30
|
+
&:not(:last-child)
|
31
|
+
margin-right: 10px
|
32
|
+
|
33
|
+
.navbar-left
|
34
|
+
+mobile
|
35
|
+
& + .navbar-right
|
36
|
+
margin-top: 20px
|
37
|
+
+tablet
|
38
|
+
align-items: center
|
39
|
+
display: flex
|
40
|
+
|
41
|
+
.navbar-right
|
42
|
+
+tablet
|
43
|
+
align-items: center
|
44
|
+
display: flex
|
45
|
+
justify-content: flex-end
|
@@ -0,0 +1,73 @@
|
|
1
|
+
.table
|
2
|
+
background: white
|
3
|
+
margin-bottom: 20px
|
4
|
+
width: 100%
|
5
|
+
th,
|
6
|
+
td
|
7
|
+
border: 1px solid $border
|
8
|
+
border-width: 0 0 1px
|
9
|
+
padding: 8px 10px
|
10
|
+
vertical-align: top
|
11
|
+
&.table-link
|
12
|
+
padding: 0
|
13
|
+
& > a
|
14
|
+
display: block
|
15
|
+
padding: 8px 10px
|
16
|
+
&:hover
|
17
|
+
background: $link
|
18
|
+
color: $link-invert
|
19
|
+
&.table-icon
|
20
|
+
padding: 5px
|
21
|
+
text-align: center
|
22
|
+
white-space: nowrap
|
23
|
+
width: 1%
|
24
|
+
.fa
|
25
|
+
+fa(21px, 24px)
|
26
|
+
&.table-link
|
27
|
+
padding: 0
|
28
|
+
& > a
|
29
|
+
padding: 5px
|
30
|
+
th
|
31
|
+
color: $text-strong
|
32
|
+
text-align: left
|
33
|
+
tr
|
34
|
+
&:hover
|
35
|
+
background: rgba($background, 0.5)
|
36
|
+
color: $text-strong
|
37
|
+
&:last-child td
|
38
|
+
border-bottom-width: 0
|
39
|
+
thead
|
40
|
+
th,
|
41
|
+
td
|
42
|
+
border-width: 0 0 2px
|
43
|
+
tfoot
|
44
|
+
th,
|
45
|
+
td
|
46
|
+
border-width: 2px 0 0
|
47
|
+
&.is-bordered
|
48
|
+
th,
|
49
|
+
td
|
50
|
+
border-width: 1px
|
51
|
+
tr
|
52
|
+
&:last-child td
|
53
|
+
border-bottom-width: 1px
|
54
|
+
&.is-narrow
|
55
|
+
th,
|
56
|
+
td
|
57
|
+
padding: 5px 10px
|
58
|
+
&.table-link
|
59
|
+
padding: 0
|
60
|
+
& > a
|
61
|
+
padding: 5px 10px
|
62
|
+
&.table-icon
|
63
|
+
padding: 2px
|
64
|
+
&.table-link
|
65
|
+
padding: 0
|
66
|
+
& > a
|
67
|
+
padding: 2px
|
68
|
+
&.is-striped
|
69
|
+
tbody
|
70
|
+
tr:nth-child(2n)
|
71
|
+
background: rgba($background, 0.5)
|
72
|
+
&:hover
|
73
|
+
background: $background
|
@@ -0,0 +1,84 @@
|
|
1
|
+
.tabs
|
2
|
+
line-height: 24px
|
3
|
+
overflow: hidden
|
4
|
+
overflow-x: auto
|
5
|
+
white-space: nowrap
|
6
|
+
&:not(:last-child)
|
7
|
+
margin-bottom: 20px
|
8
|
+
.fa
|
9
|
+
line-height: 24px
|
10
|
+
margin: 0 -2px
|
11
|
+
width: 24px
|
12
|
+
a
|
13
|
+
border-bottom: 1px solid $border
|
14
|
+
color: $text
|
15
|
+
display: block
|
16
|
+
margin-bottom: -1px
|
17
|
+
padding: 5px 0
|
18
|
+
vertical-align: top
|
19
|
+
&:hover
|
20
|
+
border-bottom-color: $text-strong
|
21
|
+
color: $text-strong
|
22
|
+
li
|
23
|
+
display: inline-block
|
24
|
+
vertical-align: top
|
25
|
+
& + li
|
26
|
+
margin-left: 20px
|
27
|
+
&.is-active
|
28
|
+
a
|
29
|
+
border-bottom-color: $link
|
30
|
+
color: $link
|
31
|
+
ul
|
32
|
+
border-bottom: 1px solid $border
|
33
|
+
&.is-boxed
|
34
|
+
a
|
35
|
+
border: 1px solid transparent
|
36
|
+
border-radius: $radius $radius 0 0
|
37
|
+
padding: 5px 15px
|
38
|
+
&:hover
|
39
|
+
background: $background
|
40
|
+
border-bottom-color: $border
|
41
|
+
li
|
42
|
+
& + li
|
43
|
+
margin-left: 5px
|
44
|
+
&.is-active
|
45
|
+
a
|
46
|
+
background: white
|
47
|
+
border-color: $border
|
48
|
+
border-bottom-color: transparent
|
49
|
+
&.is-toggle
|
50
|
+
ul
|
51
|
+
border-bottom: none
|
52
|
+
display: flex
|
53
|
+
a
|
54
|
+
border: 1px solid $border
|
55
|
+
margin-bottom: 0
|
56
|
+
padding: 5px 10px
|
57
|
+
position: relative
|
58
|
+
&:hover
|
59
|
+
background: $background
|
60
|
+
border-color: $border-hover
|
61
|
+
z-index: 2
|
62
|
+
li
|
63
|
+
& + li
|
64
|
+
margin-left: -1px
|
65
|
+
&:first-child a
|
66
|
+
border-radius: $radius 0 0 $radius
|
67
|
+
&:last-child a
|
68
|
+
border-radius: 0 $radius $radius 0
|
69
|
+
&.is-active
|
70
|
+
a
|
71
|
+
background: $primary
|
72
|
+
border-color: $primary
|
73
|
+
color: $primary-invert
|
74
|
+
z-index: 1
|
75
|
+
&.is-fullwidth
|
76
|
+
+tablet
|
77
|
+
ul
|
78
|
+
display: flex
|
79
|
+
justify-content: center
|
80
|
+
text-align: center
|
81
|
+
li
|
82
|
+
flex: 1
|
83
|
+
& + li
|
84
|
+
margin-left: 0
|
@@ -0,0 +1,74 @@
|
|
1
|
+
// Colors
|
2
|
+
|
3
|
+
$primary-invert: findColorInvert($primary)
|
4
|
+
$info: $blue
|
5
|
+
$info-invert: findColorInvert($info)
|
6
|
+
$success: $green
|
7
|
+
$success-invert: findColorInvert($success)
|
8
|
+
$warning: $yellow
|
9
|
+
$warning-invert: findColorInvert($warning)
|
10
|
+
$danger: $red
|
11
|
+
$danger-invert: findColorInvert($danger)
|
12
|
+
|
13
|
+
$colors: (primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert))
|
14
|
+
|
15
|
+
$body-background: $grey-lighter
|
16
|
+
|
17
|
+
$background: $grey-lighter
|
18
|
+
|
19
|
+
$border: $grey-light
|
20
|
+
$border-hover: $grey
|
21
|
+
|
22
|
+
// Text
|
23
|
+
|
24
|
+
$text: $grey-dark
|
25
|
+
$text-invert: findColorInvert($text)
|
26
|
+
$text-light: $grey
|
27
|
+
$text-strong: $grey-darker
|
28
|
+
|
29
|
+
// Code
|
30
|
+
|
31
|
+
$code: $info
|
32
|
+
$code-background: $background
|
33
|
+
|
34
|
+
$pre: $text
|
35
|
+
$pre-background: $background
|
36
|
+
|
37
|
+
// Links
|
38
|
+
|
39
|
+
$link: $primary
|
40
|
+
$link-invert: $primary-invert
|
41
|
+
$link-visited: $purple
|
42
|
+
|
43
|
+
$link-hover: $grey-darker
|
44
|
+
$link-hover-background: $grey-lighter
|
45
|
+
$link-hover-border: $grey-darker
|
46
|
+
|
47
|
+
$link-active: $grey-darker
|
48
|
+
$link-active-border: $grey-darker
|
49
|
+
|
50
|
+
// Controls
|
51
|
+
|
52
|
+
$control: $text-strong
|
53
|
+
$control-background: $text-invert
|
54
|
+
$control-border: $border
|
55
|
+
|
56
|
+
$control-hover: $link-hover
|
57
|
+
$control-hover-border: $border-hover
|
58
|
+
|
59
|
+
$control-active: $link
|
60
|
+
$control-active-background: $link
|
61
|
+
$control-active-background-invert: $link-invert
|
62
|
+
$control-active-border: $link
|
63
|
+
|
64
|
+
// Typography
|
65
|
+
|
66
|
+
$family-primary: $family-sans-serif
|
67
|
+
|
68
|
+
$size-small: $size-7
|
69
|
+
$size-normal: $size-6
|
70
|
+
$size-medium: $size-5
|
71
|
+
$size-large: $size-3
|
72
|
+
$size-huge: $size-1
|
73
|
+
|
74
|
+
$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6
|
@@ -0,0 +1,41 @@
|
|
1
|
+
// Colors
|
2
|
+
|
3
|
+
$grey-darker: #222324
|
4
|
+
$grey-dark: #69707a
|
5
|
+
$grey: #aeb1b5
|
6
|
+
$grey-light: #d3d6db
|
7
|
+
$grey-lighter: #ebeff5
|
8
|
+
$grey-lighter: #f5f7fa
|
9
|
+
|
10
|
+
$blue: #42afe3
|
11
|
+
$green: #97cd76
|
12
|
+
$orange: #f68b39
|
13
|
+
$purple: #847bb9
|
14
|
+
$red: #ed6c63
|
15
|
+
$turquoise: #1fc8db
|
16
|
+
$yellow: #fce473
|
17
|
+
|
18
|
+
$primary: $turquoise
|
19
|
+
|
20
|
+
// Typography
|
21
|
+
|
22
|
+
$family-sans-serif: "Helvetica Neue", "Helvetica", "Arial", sans-serif
|
23
|
+
|
24
|
+
$size-1: 48px
|
25
|
+
$size-2: 40px
|
26
|
+
$size-3: 28px
|
27
|
+
$size-4: 24px
|
28
|
+
$size-5: 18px
|
29
|
+
$size-6: 14px
|
30
|
+
|
31
|
+
$size-7: 11px
|
32
|
+
|
33
|
+
// Dimensions
|
34
|
+
|
35
|
+
$header-height: 50px
|
36
|
+
|
37
|
+
// Miscellaneous
|
38
|
+
|
39
|
+
$easing: ease-out
|
40
|
+
$radius: 3px
|
41
|
+
$speed: 86ms
|