bulma-sass 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
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