bulma-sass 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +9 -0
  3. data/Gemfile +4 -0
  4. data/LICENSE.txt +21 -0
  5. data/README.md +29 -0
  6. data/Rakefile +2 -0
  7. data/app/assets/stylesheets/bulma.sass +9 -0
  8. data/app/assets/stylesheets/bulma/base/base.sass +6 -0
  9. data/app/assets/stylesheets/bulma/base/content.sass +51 -0
  10. data/app/assets/stylesheets/bulma/base/generic.sass +101 -0
  11. data/app/assets/stylesheets/bulma/base/helpers.sass +27 -0
  12. data/app/assets/stylesheets/bulma/base/highlight.sass +123 -0
  13. data/app/assets/stylesheets/bulma/components/card.sass +36 -0
  14. data/app/assets/stylesheets/bulma/components/components.sass +11 -0
  15. data/app/assets/stylesheets/bulma/components/grid.sass +48 -0
  16. data/app/assets/stylesheets/bulma/components/media.sass +69 -0
  17. data/app/assets/stylesheets/bulma/components/menu.sass +25 -0
  18. data/app/assets/stylesheets/bulma/components/navbar.sass +45 -0
  19. data/app/assets/stylesheets/bulma/components/table.sass +73 -0
  20. data/app/assets/stylesheets/bulma/components/tabs.sass +84 -0
  21. data/app/assets/stylesheets/bulma/config/generated-variables.sass +74 -0
  22. data/app/assets/stylesheets/bulma/config/variables.sass +41 -0
  23. data/app/assets/stylesheets/bulma/elements/buttons.sass +96 -0
  24. data/app/assets/stylesheets/bulma/elements/controls.sass +213 -0
  25. data/app/assets/stylesheets/bulma/elements/elements.sass +172 -0
  26. data/app/assets/stylesheets/bulma/elements/messages.sass +41 -0
  27. data/app/assets/stylesheets/bulma/elements/notifications.sass +20 -0
  28. data/app/assets/stylesheets/bulma/elements/titles.sass +57 -0
  29. data/app/assets/stylesheets/bulma/layout/footer.sass +11 -0
  30. data/app/assets/stylesheets/bulma/layout/header.sass +149 -0
  31. data/app/assets/stylesheets/bulma/layout/hero.sass +143 -0
  32. data/app/assets/stylesheets/bulma/layout/layout.sass +6 -0
  33. data/app/assets/stylesheets/bulma/layout/section.sass +11 -0
  34. data/app/assets/stylesheets/bulma/utilities/animations.sass +5 -0
  35. data/app/assets/stylesheets/bulma/utilities/functions.sass +34 -0
  36. data/app/assets/stylesheets/bulma/utilities/mixins.sass +83 -0
  37. data/app/assets/stylesheets/bulma/utilities/reset.sass +174 -0
  38. data/app/assets/stylesheets/bulma/utilities/utilities.sass +6 -0
  39. data/bulma-sass.gemspec +25 -0
  40. data/lib/bulma-sass.rb +7 -0
  41. data/lib/bulma/sass/engine.rb +6 -0
  42. data/lib/bulma/sass/version.rb +5 -0
  43. 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