jekyll-bulma-feather 0.1.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 (83) hide show
  1. checksums.yaml +7 -0
  2. data/COPYING.md +88 -0
  3. data/README.md +125 -0
  4. data/_includes/feather.html +3 -0
  5. data/_includes/footer.html +14 -0
  6. data/_includes/head.html +12 -0
  7. data/_includes/header.html +8 -0
  8. data/_includes/nav.html +38 -0
  9. data/_layouts/default.html +7 -0
  10. data/_layouts/empty.html +9 -0
  11. data/_layouts/page.html +5 -0
  12. data/_layouts/post.html +5 -0
  13. data/_sass/bulma.scss +1 -0
  14. data/_sass/bulma/bulma-rtl.sass +3 -0
  15. data/_sass/bulma/bulma.sass +10 -0
  16. data/_sass/bulma/sass/base/_all.sass +6 -0
  17. data/_sass/bulma/sass/base/animations.sass +5 -0
  18. data/_sass/bulma/sass/base/generic.sass +145 -0
  19. data/_sass/bulma/sass/base/helpers.sass +1 -0
  20. data/_sass/bulma/sass/base/minireset.sass +79 -0
  21. data/_sass/bulma/sass/components/_all.sass +15 -0
  22. data/_sass/bulma/sass/components/breadcrumb.sass +77 -0
  23. data/_sass/bulma/sass/components/card.sass +102 -0
  24. data/_sass/bulma/sass/components/dropdown.sass +83 -0
  25. data/_sass/bulma/sass/components/level.sass +79 -0
  26. data/_sass/bulma/sass/components/media.sass +59 -0
  27. data/_sass/bulma/sass/components/menu.sass +59 -0
  28. data/_sass/bulma/sass/components/message.sass +101 -0
  29. data/_sass/bulma/sass/components/modal.sass +117 -0
  30. data/_sass/bulma/sass/components/navbar.sass +445 -0
  31. data/_sass/bulma/sass/components/pagination.sass +153 -0
  32. data/_sass/bulma/sass/components/panel.sass +121 -0
  33. data/_sass/bulma/sass/components/tabs.sass +176 -0
  34. data/_sass/bulma/sass/elements/_all.sass +16 -0
  35. data/_sass/bulma/sass/elements/box.sass +26 -0
  36. data/_sass/bulma/sass/elements/button.sass +344 -0
  37. data/_sass/bulma/sass/elements/container.sass +29 -0
  38. data/_sass/bulma/sass/elements/content.sass +157 -0
  39. data/_sass/bulma/sass/elements/form.sass +1 -0
  40. data/_sass/bulma/sass/elements/icon.sass +21 -0
  41. data/_sass/bulma/sass/elements/image.sass +73 -0
  42. data/_sass/bulma/sass/elements/notification.sass +52 -0
  43. data/_sass/bulma/sass/elements/other.sass +41 -0
  44. data/_sass/bulma/sass/elements/progress.sass +73 -0
  45. data/_sass/bulma/sass/elements/table.sass +133 -0
  46. data/_sass/bulma/sass/elements/tag.sass +140 -0
  47. data/_sass/bulma/sass/elements/title.sass +72 -0
  48. data/_sass/bulma/sass/form/_all.sass +9 -0
  49. data/_sass/bulma/sass/form/checkbox-radio.sass +24 -0
  50. data/_sass/bulma/sass/form/file.sass +184 -0
  51. data/_sass/bulma/sass/form/input-textarea.sass +68 -0
  52. data/_sass/bulma/sass/form/select.sass +89 -0
  53. data/_sass/bulma/sass/form/shared.sass +60 -0
  54. data/_sass/bulma/sass/form/tools.sass +217 -0
  55. data/_sass/bulma/sass/grid/_all.sass +5 -0
  56. data/_sass/bulma/sass/grid/columns.sass +513 -0
  57. data/_sass/bulma/sass/grid/tiles.sass +36 -0
  58. data/_sass/bulma/sass/helpers/_all.sass +12 -0
  59. data/_sass/bulma/sass/helpers/color.sass +39 -0
  60. data/_sass/bulma/sass/helpers/flexbox.sass +35 -0
  61. data/_sass/bulma/sass/helpers/float.sass +10 -0
  62. data/_sass/bulma/sass/helpers/other.sass +14 -0
  63. data/_sass/bulma/sass/helpers/overflow.sass +2 -0
  64. data/_sass/bulma/sass/helpers/position.sass +7 -0
  65. data/_sass/bulma/sass/helpers/spacing.sass +31 -0
  66. data/_sass/bulma/sass/helpers/typography.sass +100 -0
  67. data/_sass/bulma/sass/helpers/visibility.sass +122 -0
  68. data/_sass/bulma/sass/layout/_all.sass +6 -0
  69. data/_sass/bulma/sass/layout/footer.sass +11 -0
  70. data/_sass/bulma/sass/layout/hero.sass +149 -0
  71. data/_sass/bulma/sass/layout/section.sass +15 -0
  72. data/_sass/bulma/sass/utilities/_all.sass +8 -0
  73. data/_sass/bulma/sass/utilities/animations.sass +1 -0
  74. data/_sass/bulma/sass/utilities/controls.sass +52 -0
  75. data/_sass/bulma/sass/utilities/derived-variables.sass +110 -0
  76. data/_sass/bulma/sass/utilities/functions.sass +115 -0
  77. data/_sass/bulma/sass/utilities/initial-variables.sass +78 -0
  78. data/_sass/bulma/sass/utilities/mixins.sass +285 -0
  79. data/_sass/jekyll-bulma-feather.scss +213 -0
  80. data/assets/feather-sprite.svg +1 -0
  81. data/assets/jekyll-bulma-feather.svg +125 -0
  82. data/assets/style.scss +5 -0
  83. metadata +166 -0
@@ -0,0 +1,15 @@
1
+ @import "../utilities/mixins"
2
+
3
+ $section-padding: 3rem 1.5rem !default
4
+ $section-padding-medium: 9rem 1.5rem !default
5
+ $section-padding-large: 18rem 1.5rem !default
6
+
7
+ .section
8
+ padding: $section-padding
9
+ // Responsiveness
10
+ +desktop
11
+ // Sizes
12
+ &.is-medium
13
+ padding: $section-padding-medium
14
+ &.is-large
15
+ padding: $section-padding-large
@@ -0,0 +1,8 @@
1
+ /* Bulma Utilities */
2
+ @charset "utf-8"
3
+
4
+ @import "initial-variables.sass"
5
+ @import "functions.sass"
6
+ @import "derived-variables.sass"
7
+ @import "mixins.sass"
8
+ @import "controls.sass"
@@ -0,0 +1 @@
1
+ @warn "The animations.sass file has MOVED. It is now in the /base folder. Please import sass/base/animations instead."
@@ -0,0 +1,52 @@
1
+ @import "derived-variables.sass"
2
+
3
+ $control-radius: $radius !default
4
+ $control-radius-small: $radius-small !default
5
+
6
+ $control-border-width: 1px !default
7
+
8
+ $control-height: 2.5em !default
9
+ $control-line-height: 1.5 !default
10
+
11
+ $control-padding-vertical: calc(0.5em - #{$control-border-width}) !default
12
+ $control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default
13
+
14
+ =control
15
+ -moz-appearance: none
16
+ -webkit-appearance: none
17
+ align-items: center
18
+ border: $control-border-width solid transparent
19
+ border-radius: $control-radius
20
+ box-shadow: none
21
+ display: inline-flex
22
+ font-size: $size-normal
23
+ height: $control-height
24
+ justify-content: flex-start
25
+ line-height: $control-line-height
26
+ padding-bottom: $control-padding-vertical
27
+ padding-left: $control-padding-horizontal
28
+ padding-right: $control-padding-horizontal
29
+ padding-top: $control-padding-vertical
30
+ position: relative
31
+ vertical-align: top
32
+ // States
33
+ &:focus,
34
+ &.is-focused,
35
+ &:active,
36
+ &.is-active
37
+ outline: none
38
+ &[disabled],
39
+ fieldset[disabled] &
40
+ cursor: not-allowed
41
+
42
+ %control
43
+ +control
44
+
45
+ // The controls sizes use mixins so they can be used at different breakpoints
46
+ =control-small
47
+ border-radius: $control-radius-small
48
+ font-size: $size-small
49
+ =control-medium
50
+ font-size: $size-medium
51
+ =control-large
52
+ font-size: $size-large
@@ -0,0 +1,110 @@
1
+ @import "initial-variables.sass"
2
+ @import "functions.sass"
3
+
4
+ $primary: $turquoise !default
5
+
6
+ $info: $cyan !default
7
+ $success: $green !default
8
+ $warning: $yellow !default
9
+ $danger: $red !default
10
+
11
+ $light: $white-ter !default
12
+ $dark: $grey-darker !default
13
+
14
+ // Invert colors
15
+
16
+ $orange-invert: findColorInvert($orange) !default
17
+ $yellow-invert: findColorInvert($yellow) !default
18
+ $green-invert: findColorInvert($green) !default
19
+ $turquoise-invert: findColorInvert($turquoise) !default
20
+ $cyan-invert: findColorInvert($cyan) !default
21
+ $blue-invert: findColorInvert($blue) !default
22
+ $purple-invert: findColorInvert($purple) !default
23
+ $red-invert: findColorInvert($red) !default
24
+
25
+ $primary-invert: findColorInvert($primary) !default
26
+ $primary-light: findLightColor($primary) !default
27
+ $primary-dark: findDarkColor($primary) !default
28
+ $info-invert: findColorInvert($info) !default
29
+ $info-light: findLightColor($info) !default
30
+ $info-dark: findDarkColor($info) !default
31
+ $success-invert: findColorInvert($success) !default
32
+ $success-light: findLightColor($success) !default
33
+ $success-dark: findDarkColor($success) !default
34
+ $warning-invert: findColorInvert($warning) !default
35
+ $warning-light: findLightColor($warning) !default
36
+ $warning-dark: findDarkColor($warning) !default
37
+ $danger-invert: findColorInvert($danger) !default
38
+ $danger-light: findLightColor($danger) !default
39
+ $danger-dark: findDarkColor($danger) !default
40
+ $light-invert: findColorInvert($light) !default
41
+ $dark-invert: findColorInvert($dark) !default
42
+
43
+ // General colors
44
+
45
+ $scheme-main: $white !default
46
+ $scheme-main-bis: $white-bis !default
47
+ $scheme-main-ter: $white-ter !default
48
+ $scheme-invert: $black !default
49
+ $scheme-invert-bis: $black-bis !default
50
+ $scheme-invert-ter: $black-ter !default
51
+
52
+ $background: $white-ter !default
53
+
54
+ $border: $grey-lighter !default
55
+ $border-hover: $grey-light !default
56
+ $border-light: $grey-lightest !default
57
+ $border-light-hover: $grey-light !default
58
+
59
+ // Text colors
60
+
61
+ $text: $grey-dark !default
62
+ $text-invert: findColorInvert($text) !default
63
+ $text-light: $grey !default
64
+ $text-strong: $grey-darker !default
65
+
66
+ // Code colors
67
+
68
+ $code: darken($red, 15%) !default
69
+ $code-background: $background !default
70
+
71
+ $pre: $text !default
72
+ $pre-background: $background !default
73
+
74
+ // Link colors
75
+
76
+ $link: $blue !default
77
+ $link-invert: findColorInvert($link) !default
78
+ $link-light: findLightColor($link) !default
79
+ $link-dark: findDarkColor($link) !default
80
+ $link-visited: $purple !default
81
+
82
+ $link-hover: $grey-darker !default
83
+ $link-hover-border: $grey-light !default
84
+
85
+ $link-focus: $grey-darker !default
86
+ $link-focus-border: $blue !default
87
+
88
+ $link-active: $grey-darker !default
89
+ $link-active-border: $grey-dark !default
90
+
91
+ // Typography
92
+
93
+ $family-primary: $family-sans-serif !default
94
+ $family-secondary: $family-sans-serif !default
95
+ $family-code: $family-monospace !default
96
+
97
+ $size-small: $size-7 !default
98
+ $size-normal: $size-6 !default
99
+ $size-medium: $size-5 !default
100
+ $size-large: $size-4 !default
101
+
102
+ // Lists and maps
103
+ $custom-colors: null !default
104
+ $custom-shades: null !default
105
+
106
+ $colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default
107
+
108
+ $shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default
109
+
110
+ $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default
@@ -0,0 +1,115 @@
1
+ @function mergeColorMaps($bulma-colors, $custom-colors)
2
+ // We return at least Bulma's hard-coded colors
3
+ $merged-colors: $bulma-colors
4
+
5
+ // We want a map as input
6
+ @if type-of($custom-colors) == 'map'
7
+ @each $name, $components in $custom-colors
8
+ // The color name should be a string
9
+ // and the components either a single color
10
+ // or a colors list with at least one element
11
+ @if type-of($name) == 'string' and (type-of($components) == 'list' or type-of($components) == 'color') and length($components) >= 1
12
+ $color-base: null
13
+ $color-invert: null
14
+ $color-light: null
15
+ $color-dark: null
16
+ $value: null
17
+
18
+ // The param can either be a single color
19
+ // or a list of 2 colors
20
+ @if type-of($components) == 'color'
21
+ $color-base: $components
22
+ $color-invert: findColorInvert($color-base)
23
+ $color-light: findLightColor($color-base)
24
+ $color-dark: findDarkColor($color-base)
25
+ @else if type-of($components) == 'list'
26
+ $color-base: nth($components, 1)
27
+ // If Invert, Light and Dark are provided
28
+ @if length($components) > 3
29
+ $color-invert: nth($components, 2)
30
+ $color-light: nth($components, 3)
31
+ $color-dark: nth($components, 4)
32
+ // If only Invert and Light are provided
33
+ @else if length($components) > 2
34
+ $color-invert: nth($components, 2)
35
+ $color-light: nth($components, 3)
36
+ $color-dark: findDarkColor($color-base)
37
+ // If only Invert is provided
38
+ @else
39
+ $color-invert: nth($components, 2)
40
+ $color-light: findLightColor($color-base)
41
+ $color-dark: findDarkColor($color-base)
42
+
43
+ $value: ($color-base, $color-invert, $color-light, $color-dark)
44
+
45
+ // We only want to merge the map if the color base is an actual color
46
+ @if type-of($color-base) == 'color'
47
+ // We merge this colors elements as map with Bulma's colors map
48
+ // (we can override them this way, no multiple definition for the same name)
49
+ // $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark)))
50
+ $merged-colors: map_merge($merged-colors, ($name: $value))
51
+
52
+ @return $merged-colors
53
+
54
+ @function powerNumber($number, $exp)
55
+ $value: 1
56
+ @if $exp > 0
57
+ @for $i from 1 through $exp
58
+ $value: $value * $number
59
+ @else if $exp < 0
60
+ @for $i from 1 through -$exp
61
+ $value: $value / $number
62
+ @return $value
63
+
64
+ @function colorLuminance($color)
65
+ @if type-of($color) != 'color'
66
+ @return 0.55
67
+ $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
68
+ @each $name, $value in $color-rgb
69
+ $adjusted: 0
70
+ $value: $value / 255
71
+ @if $value < 0.03928
72
+ $value: $value / 12.92
73
+ @else
74
+ $value: ($value + .055) / 1.055
75
+ $value: powerNumber($value, 2)
76
+ $color-rgb: map-merge($color-rgb, ($name: $value))
77
+ @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
78
+
79
+ @function findColorInvert($color)
80
+ @if (colorLuminance($color) > 0.55)
81
+ @return rgba(#000, 0.7)
82
+ @else
83
+ @return #fff
84
+
85
+ @function findLightColor($color)
86
+ @if type-of($color) == 'color'
87
+ $l: 96%
88
+ @if lightness($color) > 96%
89
+ $l: lightness($color)
90
+ @return change-color($color, $lightness: $l)
91
+ @return $background
92
+
93
+ @function findDarkColor($color)
94
+ @if type-of($color) == 'color'
95
+ $base-l: 29%
96
+ $luminance: colorLuminance($color)
97
+ $luminance-delta: (0.53 - $luminance)
98
+ $target-l: round($base-l + ($luminance-delta * 53))
99
+ @return change-color($color, $lightness: max($base-l, $target-l))
100
+ @return $text-strong
101
+
102
+ @function bulmaRgba($color, $alpha)
103
+ @if type-of($color) != 'color'
104
+ @return $color
105
+ @return rgba($color, $alpha)
106
+
107
+ @function bulmaDarken($color, $amount)
108
+ @if type-of($color) != 'color'
109
+ @return $color
110
+ @return darken($color, $amount)
111
+
112
+ @function bulmaLighten($color, $amount)
113
+ @if type-of($color) != 'color'
114
+ @return $color
115
+ @return lighten($color, $amount)
@@ -0,0 +1,78 @@
1
+ // Colors
2
+
3
+ $black: hsl(0, 0%, 4%) !default
4
+ $black-bis: hsl(0, 0%, 7%) !default
5
+ $black-ter: hsl(0, 0%, 14%) !default
6
+
7
+ $grey-darker: hsl(0, 0%, 21%) !default
8
+ $grey-dark: hsl(0, 0%, 29%) !default
9
+ $grey: hsl(0, 0%, 48%) !default
10
+ $grey-light: hsl(0, 0%, 71%) !default
11
+ $grey-lighter: hsl(0, 0%, 86%) !default
12
+ $grey-lightest: hsl(0, 0%, 93%) !default
13
+
14
+ $white-ter: hsl(0, 0%, 96%) !default
15
+ $white-bis: hsl(0, 0%, 98%) !default
16
+ $white: hsl(0, 0%, 100%) !default
17
+
18
+ $orange: hsl(14, 100%, 53%) !default
19
+ $yellow: hsl(48, 100%, 67%) !default
20
+ $green: hsl(141, 53%, 53%) !default
21
+ $turquoise: hsl(171, 100%, 41%) !default
22
+ $cyan: hsl(204, 71%, 53%) !default
23
+ $blue: hsl(217, 71%, 53%) !default
24
+ $purple: hsl(271, 100%, 71%) !default
25
+ $red: hsl(348, 86%, 61%) !default
26
+
27
+ // Typography
28
+
29
+ $family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
30
+ $family-monospace: monospace !default
31
+ $render-mode: optimizeLegibility !default
32
+
33
+ $size-1: 3rem !default
34
+ $size-2: 2.5rem !default
35
+ $size-3: 2rem !default
36
+ $size-4: 1.5rem !default
37
+ $size-5: 1.25rem !default
38
+ $size-6: 1rem !default
39
+ $size-7: 0.75rem !default
40
+
41
+ $weight-light: 300 !default
42
+ $weight-normal: 400 !default
43
+ $weight-medium: 500 !default
44
+ $weight-semibold: 600 !default
45
+ $weight-bold: 700 !default
46
+
47
+ // Spacing
48
+
49
+ $block-spacing: 1.5rem !default
50
+
51
+ // Responsiveness
52
+
53
+ // The container horizontal gap, which acts as the offset for breakpoints
54
+ $gap: 32px !default
55
+ // 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
56
+ $tablet: 769px !default
57
+ // 960px container + 4rem
58
+ $desktop: 960px + (2 * $gap) !default
59
+ // 1152px container + 4rem
60
+ $widescreen: 1152px + (2 * $gap) !default
61
+ $widescreen-enabled: true !default
62
+ // 1344px container + 4rem
63
+ $fullhd: 1344px + (2 * $gap) !default
64
+ $fullhd-enabled: true !default
65
+
66
+ // Miscellaneous
67
+
68
+ $easing: ease-out !default
69
+ $radius-small: 2px !default
70
+ $radius: 4px !default
71
+ $radius-large: 6px !default
72
+ $radius-rounded: 290486px !default
73
+ $speed: 86ms !default
74
+
75
+ // Flags
76
+
77
+ $variable-columns: true !default
78
+ $rtl: false !default
@@ -0,0 +1,285 @@
1
+ @import "derived-variables"
2
+
3
+ =clearfix
4
+ &::after
5
+ clear: both
6
+ content: " "
7
+ display: table
8
+
9
+ =center($width, $height: 0)
10
+ position: absolute
11
+ @if $height != 0
12
+ left: calc(50% - (#{$width} / 2))
13
+ top: calc(50% - (#{$height} / 2))
14
+ @else
15
+ left: calc(50% - (#{$width} / 2))
16
+ top: calc(50% - (#{$width} / 2))
17
+
18
+ =fa($size, $dimensions)
19
+ display: inline-block
20
+ font-size: $size
21
+ height: $dimensions
22
+ line-height: $dimensions
23
+ text-align: center
24
+ vertical-align: top
25
+ width: $dimensions
26
+
27
+ =hamburger($dimensions)
28
+ cursor: pointer
29
+ display: block
30
+ height: $dimensions
31
+ position: relative
32
+ width: $dimensions
33
+ span
34
+ background-color: currentColor
35
+ display: block
36
+ height: 1px
37
+ left: calc(50% - 8px)
38
+ position: absolute
39
+ transform-origin: center
40
+ transition-duration: $speed
41
+ transition-property: background-color, opacity, transform
42
+ transition-timing-function: $easing
43
+ width: 16px
44
+ &:nth-child(1)
45
+ top: calc(50% - 6px)
46
+ &:nth-child(2)
47
+ top: calc(50% - 1px)
48
+ &:nth-child(3)
49
+ top: calc(50% + 4px)
50
+ &:hover
51
+ background-color: bulmaRgba(black, 0.05)
52
+ // Modifers
53
+ &.is-active
54
+ span
55
+ &:nth-child(1)
56
+ transform: translateY(5px) rotate(45deg)
57
+ &:nth-child(2)
58
+ opacity: 0
59
+ &:nth-child(3)
60
+ transform: translateY(-5px) rotate(-45deg)
61
+
62
+ =overflow-touch
63
+ -webkit-overflow-scrolling: touch
64
+
65
+ =placeholder
66
+ $placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input'
67
+ @each $placeholder in $placeholders
68
+ &:#{$placeholder}-placeholder
69
+ @content
70
+
71
+ // Responsiveness
72
+
73
+ =from($device)
74
+ @media screen and (min-width: $device)
75
+ @content
76
+
77
+ =until($device)
78
+ @media screen and (max-width: $device - 1px)
79
+ @content
80
+
81
+ =mobile
82
+ @media screen and (max-width: $tablet - 1px)
83
+ @content
84
+
85
+ =tablet
86
+ @media screen and (min-width: $tablet), print
87
+ @content
88
+
89
+ =tablet-only
90
+ @media screen and (min-width: $tablet) and (max-width: $desktop - 1px)
91
+ @content
92
+
93
+ =touch
94
+ @media screen and (max-width: $desktop - 1px)
95
+ @content
96
+
97
+ =desktop
98
+ @media screen and (min-width: $desktop)
99
+ @content
100
+
101
+ =desktop-only
102
+ @if $widescreen-enabled
103
+ @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
104
+ @content
105
+
106
+ =until-widescreen
107
+ @if $widescreen-enabled
108
+ @media screen and (max-width: $widescreen - 1px)
109
+ @content
110
+
111
+ =widescreen
112
+ @if $widescreen-enabled
113
+ @media screen and (min-width: $widescreen)
114
+ @content
115
+
116
+ =widescreen-only
117
+ @if $widescreen-enabled and $fullhd-enabled
118
+ @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px)
119
+ @content
120
+
121
+ =until-fullhd
122
+ @if $fullhd-enabled
123
+ @media screen and (max-width: $fullhd - 1px)
124
+ @content
125
+
126
+ =fullhd
127
+ @if $fullhd-enabled
128
+ @media screen and (min-width: $fullhd)
129
+ @content
130
+
131
+ =ltr
132
+ @if not $rtl
133
+ @content
134
+
135
+ =rtl
136
+ @if $rtl
137
+ @content
138
+
139
+ =ltr-property($property, $spacing, $right: true)
140
+ $normal: if($right, "right", "left")
141
+ $opposite: if($right, "left", "right")
142
+ @if $rtl
143
+ #{$property}-#{$opposite}: $spacing
144
+ @else
145
+ #{$property}-#{$normal}: $spacing
146
+
147
+ =ltr-position($spacing, $right: true)
148
+ $normal: if($right, "right", "left")
149
+ $opposite: if($right, "left", "right")
150
+ @if $rtl
151
+ #{$opposite}: $spacing
152
+ @else
153
+ #{$normal}: $spacing
154
+
155
+ // Placeholders
156
+
157
+ =unselectable
158
+ -webkit-touch-callout: none
159
+ -webkit-user-select: none
160
+ -moz-user-select: none
161
+ -ms-user-select: none
162
+ user-select: none
163
+
164
+ %unselectable
165
+ +unselectable
166
+
167
+ =arrow($color: transparent)
168
+ border: 3px solid $color
169
+ border-radius: 2px
170
+ border-right: 0
171
+ border-top: 0
172
+ content: " "
173
+ display: block
174
+ height: 0.625em
175
+ margin-top: -0.4375em
176
+ pointer-events: none
177
+ position: absolute
178
+ top: 50%
179
+ transform: rotate(-45deg)
180
+ transform-origin: center
181
+ width: 0.625em
182
+
183
+ %arrow
184
+ +arrow
185
+
186
+ =block($spacing: $block-spacing)
187
+ &:not(:last-child)
188
+ margin-bottom: $spacing
189
+
190
+ %block
191
+ +block
192
+
193
+ =delete
194
+ @extend %unselectable
195
+ -moz-appearance: none
196
+ -webkit-appearance: none
197
+ background-color: bulmaRgba($scheme-invert, 0.2)
198
+ border: none
199
+ border-radius: $radius-rounded
200
+ cursor: pointer
201
+ pointer-events: auto
202
+ display: inline-block
203
+ flex-grow: 0
204
+ flex-shrink: 0
205
+ font-size: 0
206
+ height: 20px
207
+ max-height: 20px
208
+ max-width: 20px
209
+ min-height: 20px
210
+ min-width: 20px
211
+ outline: none
212
+ position: relative
213
+ vertical-align: top
214
+ width: 20px
215
+ &::before,
216
+ &::after
217
+ background-color: $scheme-main
218
+ content: ""
219
+ display: block
220
+ left: 50%
221
+ position: absolute
222
+ top: 50%
223
+ transform: translateX(-50%) translateY(-50%) rotate(45deg)
224
+ transform-origin: center center
225
+ &::before
226
+ height: 2px
227
+ width: 50%
228
+ &::after
229
+ height: 50%
230
+ width: 2px
231
+ &:hover,
232
+ &:focus
233
+ background-color: bulmaRgba($scheme-invert, 0.3)
234
+ &:active
235
+ background-color: bulmaRgba($scheme-invert, 0.4)
236
+ // Sizes
237
+ &.is-small
238
+ height: 16px
239
+ max-height: 16px
240
+ max-width: 16px
241
+ min-height: 16px
242
+ min-width: 16px
243
+ width: 16px
244
+ &.is-medium
245
+ height: 24px
246
+ max-height: 24px
247
+ max-width: 24px
248
+ min-height: 24px
249
+ min-width: 24px
250
+ width: 24px
251
+ &.is-large
252
+ height: 32px
253
+ max-height: 32px
254
+ max-width: 32px
255
+ min-height: 32px
256
+ min-width: 32px
257
+ width: 32px
258
+
259
+ %delete
260
+ +delete
261
+
262
+ =loader
263
+ animation: spinAround 500ms infinite linear
264
+ border: 2px solid $grey-lighter
265
+ border-radius: $radius-rounded
266
+ border-right-color: transparent
267
+ border-top-color: transparent
268
+ content: ""
269
+ display: block
270
+ height: 1em
271
+ position: relative
272
+ width: 1em
273
+
274
+ %loader
275
+ +loader
276
+
277
+ =overlay($offset: 0)
278
+ bottom: $offset
279
+ left: $offset
280
+ position: absolute
281
+ right: $offset
282
+ top: $offset
283
+
284
+ %overlay
285
+ +overlay