ols-theme 0.1.0

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 (142) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE.txt +21 -0
  3. data/README.md +50 -0
  4. data/_includes/default-footer.html +56 -0
  5. data/_includes/default-header.html +81 -0
  6. data/_includes/detailed-schedule.md +11 -0
  7. data/_includes/external-entities.html +43 -0
  8. data/_includes/overall-schedule.md +27 -0
  9. data/_includes/people.html +89 -0
  10. data/_includes/schedule.md +2 -0
  11. data/_includes/timeline.md +24 -0
  12. data/_includes/toc.html +12 -0
  13. data/_includes/week.md +50 -0
  14. data/_layouts/base.html +66 -0
  15. data/_layouts/default.html +37 -0
  16. data/_layouts/page.html +9 -0
  17. data/_layouts/people.html +373 -0
  18. data/_layouts/post.html +5 -0
  19. data/_layouts/posts.html +51 -0
  20. data/_sass/bulma/CHANGELOG.md +1254 -0
  21. data/_sass/bulma/LICENSE +21 -0
  22. data/_sass/bulma/README.md +124 -0
  23. data/_sass/bulma/bulma.sass +9 -0
  24. data/_sass/bulma/css/bulma.css +10599 -0
  25. data/_sass/bulma/css/bulma.css.map +1 -0
  26. data/_sass/bulma/css/bulma.min.css +1 -0
  27. data/_sass/bulma/package.json +52 -0
  28. data/_sass/bulma/sass/base/_all.sass +5 -0
  29. data/_sass/bulma/sass/base/generic.sass +142 -0
  30. data/_sass/bulma/sass/base/helpers.sass +281 -0
  31. data/_sass/bulma/sass/base/minireset.sass +85 -0
  32. data/_sass/bulma/sass/components/_all.sass +15 -0
  33. data/_sass/bulma/sass/components/breadcrumb.sass +75 -0
  34. data/_sass/bulma/sass/components/card.sass +79 -0
  35. data/_sass/bulma/sass/components/dropdown.sass +81 -0
  36. data/_sass/bulma/sass/components/level.sass +77 -0
  37. data/_sass/bulma/sass/components/list.sass +39 -0
  38. data/_sass/bulma/sass/components/media.sass +48 -0
  39. data/_sass/bulma/sass/components/menu.sass +57 -0
  40. data/_sass/bulma/sass/components/message.sass +87 -0
  41. data/_sass/bulma/sass/components/modal.sass +113 -0
  42. data/_sass/bulma/sass/components/navbar.sass +443 -0
  43. data/_sass/bulma/sass/components/pagination.sass +149 -0
  44. data/_sass/bulma/sass/components/panel.sass +103 -0
  45. data/_sass/bulma/sass/components/tabs.sass +151 -0
  46. data/_sass/bulma/sass/elements/_all.sass +15 -0
  47. data/_sass/bulma/sass/elements/box.sass +24 -0
  48. data/_sass/bulma/sass/elements/button.sass +305 -0
  49. data/_sass/bulma/sass/elements/container.sass +23 -0
  50. data/_sass/bulma/sass/elements/content.sass +155 -0
  51. data/_sass/bulma/sass/elements/form.sass +1 -0
  52. data/_sass/bulma/sass/elements/icon.sass +21 -0
  53. data/_sass/bulma/sass/elements/image.sass +69 -0
  54. data/_sass/bulma/sass/elements/notification.sass +35 -0
  55. data/_sass/bulma/sass/elements/other.sass +39 -0
  56. data/_sass/bulma/sass/elements/progress.sass +67 -0
  57. data/_sass/bulma/sass/elements/table.sass +127 -0
  58. data/_sass/bulma/sass/elements/tag.sass +121 -0
  59. data/_sass/bulma/sass/elements/title.sass +70 -0
  60. data/_sass/bulma/sass/form/_all.sass +8 -0
  61. data/_sass/bulma/sass/form/checkbox-radio.sass +21 -0
  62. data/_sass/bulma/sass/form/file.sass +180 -0
  63. data/_sass/bulma/sass/form/input-textarea.sass +60 -0
  64. data/_sass/bulma/sass/form/select.sass +85 -0
  65. data/_sass/bulma/sass/form/shared.sass +55 -0
  66. data/_sass/bulma/sass/form/tools.sass +205 -0
  67. data/_sass/bulma/sass/grid/_all.sass +4 -0
  68. data/_sass/bulma/sass/grid/columns.sass +504 -0
  69. data/_sass/bulma/sass/grid/tiles.sass +34 -0
  70. data/_sass/bulma/sass/layout/_all.sass +5 -0
  71. data/_sass/bulma/sass/layout/footer.sass +9 -0
  72. data/_sass/bulma/sass/layout/hero.sass +143 -0
  73. data/_sass/bulma/sass/layout/section.sass +13 -0
  74. data/_sass/bulma/sass/utilities/_all.sass +8 -0
  75. data/_sass/bulma/sass/utilities/animations.sass +5 -0
  76. data/_sass/bulma/sass/utilities/controls.sass +50 -0
  77. data/_sass/bulma/sass/utilities/derived-variables.sass +85 -0
  78. data/_sass/bulma/sass/utilities/functions.sass +62 -0
  79. data/_sass/bulma/sass/utilities/initial-variables.sass +76 -0
  80. data/_sass/bulma/sass/utilities/mixins.sass +261 -0
  81. data/assets/css/custom.scss +422 -0
  82. data/assets/images/2019-09-24-application.png +0 -0
  83. data/assets/images/2019-10-18-projects.jpg +0 -0
  84. data/assets/images/2019-10-21-storytelling.jpeg +0 -0
  85. data/assets/images/2019-11-13-difference-with-elife-innovation-leaders.jpg +0 -0
  86. data/assets/images/2019-11-25-blog2.png +0 -0
  87. data/assets/images/2019-11-25-blog3.png +0 -0
  88. data/assets/images/2019-11-25-blog4.png +0 -0
  89. data/assets/images/2019-11-25-blog5.png +0 -0
  90. data/assets/images/2019-11-25-blog6.png +0 -0
  91. data/assets/images/2019-11-25-header-expert.jpeg +0 -0
  92. data/assets/images/2020-ally-training.jpg +0 -0
  93. data/assets/images/2021-04-30-ols-2-blog-2.png +0 -0
  94. data/assets/images/2021-04-30-ols-2-blog.png +0 -0
  95. data/assets/images/2021-12-21-wt-open-research-fund-header.png +0 -0
  96. data/assets/images/2022-01-04-esthers-mentoring-blog-illustration.jpg +0 -0
  97. data/assets/images/2022-01-27-ols-czi-funding.jpg +0 -0
  98. data/assets/images/2022-02-18-for-hire.jpg +0 -0
  99. data/assets/images/2022-04-01-header-image-speed-blod-nadine.jpg +0 -0
  100. data/assets/images/2022-05-13-os-hobby-blog.jpg +0 -0
  101. data/assets/images/2022-07-18-ismaelkg-crinkle.png +0 -0
  102. data/assets/images/2022-07-18-ismaelkg-timeline-image.png +0 -0
  103. data/assets/images/2022-07-18-ismaelkg-watches.jpg +0 -0
  104. data/assets/images/2022-07-18-osmooc-logo.png +0 -0
  105. data/assets/images/2022-07-18-osmooc-modules.png +0 -0
  106. data/assets/images/2022-07-18-tudelft-history.png +0 -0
  107. data/assets/images/2022-07-18-twitter.png +0 -0
  108. data/assets/images/2022-08-adi-goldstein-unsplash.jpg +0 -0
  109. data/assets/images/2022-08-paz-meme.png +0 -0
  110. data/assets/images/2022-08-paz.jpg +0 -0
  111. data/assets/images/2022-12-andrea-sanchez.jpg +0 -0
  112. data/assets/images/2022-12-ecg-grant-announcement.png +0 -0
  113. data/assets/images/2022-12-jon-tyson-unsplash.jpg +0 -0
  114. data/assets/images/2022-12-melissa-black.jpg +0 -0
  115. data/assets/images/2022-12-mitchell-luo-unsplash.jpg +0 -0
  116. data/assets/images/2022-12-ols-resident-fellows.jpg +0 -0
  117. data/assets/images/2022-12-pexels-linda-ellershein.jpg +0 -0
  118. data/assets/images/2022-12-reina-camacho.png +0 -0
  119. data/assets/images/2022-WT-OLS-Job-Description.pdf +0 -0
  120. data/assets/images/2023-02-1-milad-fakurian-0n1pmev3w2A-unsplash.jpg +0 -0
  121. data/assets/images/2023-04-18-introducing-the-new-OLS/colourrefresh.png +0 -0
  122. data/assets/images/2023-04-18-introducing-the-new-OLS/identity-poster.png +0 -0
  123. data/assets/images/2023-04-18-introducing-the-new-OLS/logo-refresh.png +0 -0
  124. data/assets/images/2023-04-18-introducing-the-new-OLS/logomark.png +0 -0
  125. data/assets/images/2023-04-18-introducing-the-new-OLS/open-by-design.png +0 -0
  126. data/assets/images/2023-04-18-introducing-the-new-OLS/open-seeds.png +0 -0
  127. data/assets/images/2023-05-debs.jpg +0 -0
  128. data/assets/images/2023-05-taj.jpg +0 -0
  129. data/assets/images/about.jpg +0 -0
  130. data/assets/images/code-of-conduct.jpg +0 -0
  131. data/assets/images/index.jpg +0 -0
  132. data/assets/images/logo.png +0 -0
  133. data/assets/images/ols-1/project-participants.jpg +0 -0
  134. data/assets/images/organizations/denbi.png +0 -0
  135. data/assets/images/organizations/elixir.png +0 -0
  136. data/assets/images/organizations/mozilla.jpg +0 -0
  137. data/assets/images/posts.jpg +0 -0
  138. data/assets/images/schedule.png +0 -0
  139. data/assets/images/syllabus.jpg +0 -0
  140. data/assets/js/posts.js +21 -0
  141. data/assets/js/scripts.js +52 -0
  142. metadata +197 -0
@@ -0,0 +1,5 @@
1
+ @keyframes spinAround
2
+ from
3
+ transform: rotate(0deg)
4
+ to
5
+ transform: rotate(359deg)
@@ -0,0 +1,50 @@
1
+ $control-radius: $radius !default
2
+ $control-radius-small: $radius-small !default
3
+
4
+ $control-border-width: 1px !default
5
+
6
+ $control-height: 2.25em !default
7
+ $control-line-height: 1.5 !default
8
+
9
+ $control-padding-vertical: calc(0.375em - #{$control-border-width}) !default
10
+ $control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default
11
+
12
+ =control
13
+ -moz-appearance: none
14
+ -webkit-appearance: none
15
+ align-items: center
16
+ border: $control-border-width solid transparent
17
+ border-radius: $control-radius
18
+ box-shadow: none
19
+ display: inline-flex
20
+ font-size: $size-normal
21
+ height: $control-height
22
+ justify-content: flex-start
23
+ line-height: $control-line-height
24
+ padding-bottom: $control-padding-vertical
25
+ padding-left: $control-padding-horizontal
26
+ padding-right: $control-padding-horizontal
27
+ padding-top: $control-padding-vertical
28
+ position: relative
29
+ vertical-align: top
30
+ // States
31
+ &:focus,
32
+ &.is-focused,
33
+ &:active,
34
+ &.is-active
35
+ outline: none
36
+ &[disabled],
37
+ fieldset[disabled] &
38
+ cursor: not-allowed
39
+
40
+ %control
41
+ +control
42
+
43
+ // The controls sizes use mixins so they can be used at different breakpoints
44
+ =control-small
45
+ border-radius: $control-radius-small
46
+ font-size: $size-small
47
+ =control-medium
48
+ font-size: $size-medium
49
+ =control-large
50
+ font-size: $size-large
@@ -0,0 +1,85 @@
1
+ $primary: $turquoise !default
2
+
3
+ $info: $cyan !default
4
+ $success: $green !default
5
+ $warning: $yellow !default
6
+ $danger: $red !default
7
+
8
+ $light: $white-ter !default
9
+ $dark: $grey-darker !default
10
+
11
+ // Invert colors
12
+
13
+ $orange-invert: findColorInvert($orange) !default
14
+ $yellow-invert: findColorInvert($yellow) !default
15
+ $green-invert: findColorInvert($green) !default
16
+ $turquoise-invert: findColorInvert($turquoise) !default
17
+ $cyan-invert: findColorInvert($cyan) !default
18
+ $blue-invert: findColorInvert($blue) !default
19
+ $purple-invert: findColorInvert($purple) !default
20
+ $red-invert: findColorInvert($red) !default
21
+
22
+ $primary-invert: $turquoise-invert !default
23
+ $info-invert: $cyan-invert !default
24
+ $success-invert: $green-invert !default
25
+ $warning-invert: $yellow-invert !default
26
+ $danger-invert: $red-invert !default
27
+ $light-invert: $dark !default
28
+ $dark-invert: $light !default
29
+
30
+ // General colors
31
+
32
+ $background: $white-ter !default
33
+
34
+ $border: $grey-lighter !default
35
+ $border-hover: $grey-light !default
36
+
37
+ // Text colors
38
+
39
+ $text: $grey-dark !default
40
+ $text-invert: findColorInvert($text) !default
41
+ $text-light: $grey !default
42
+ $text-strong: $grey-darker !default
43
+
44
+ // Code colors
45
+
46
+ $code: $red !default
47
+ $code-background: $background !default
48
+
49
+ $pre: $text !default
50
+ $pre-background: $background !default
51
+
52
+ // Link colors
53
+
54
+ $link: $blue !default
55
+ $link-invert: $blue-invert !default
56
+ $link-visited: $purple !default
57
+
58
+ $link-hover: $grey-darker !default
59
+ $link-hover-border: $grey-light !default
60
+
61
+ $link-focus: $grey-darker !default
62
+ $link-focus-border: $blue !default
63
+
64
+ $link-active: $grey-darker !default
65
+ $link-active-border: $grey-dark !default
66
+
67
+ // Typography
68
+
69
+ $family-primary: $family-sans-serif !default
70
+ $family-secondary: $family-sans-serif !default
71
+ $family-code: $family-monospace !default
72
+
73
+ $size-small: $size-7 !default
74
+ $size-normal: $size-6 !default
75
+ $size-medium: $size-5 !default
76
+ $size-large: $size-4 !default
77
+
78
+ // Lists and maps
79
+ $custom-colors: null !default
80
+ $custom-shades: null !default
81
+
82
+ $colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)), $custom-colors) !default
83
+ $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
84
+
85
+ $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default
@@ -0,0 +1,62 @@
1
+ @function mergeColorMaps($bulma-colors, $custom-colors)
2
+ // we return at least bulma hardcoded 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
+ // color name should be a string and colors pair a list with at least one element
9
+ @if type-of($name) == 'string' and (type-of($components) == 'list' or type-of($components) == 'color') and length($components) >= 1
10
+ $color-base: null
11
+
12
+ // the param can either be a single color
13
+ // or a list of 2 colors
14
+ @if type-of($components) == 'color'
15
+ $color-base: $components
16
+ @else if type-of($components) == 'list'
17
+ $color-base: nth($components, 1)
18
+
19
+ $color-invert: null
20
+ // is an inverted color provided in the list
21
+ @if length($components) > 1
22
+ $color-invert: nth($components, 2)
23
+
24
+ // we only want a color as base color
25
+ @if type-of($color-base) == 'color'
26
+ // if inverted color is not provided or is not a color we compute it
27
+ @if type-of($color-invert) != 'color'
28
+ $color-invert: findColorInvert($color-base)
29
+
30
+ // we merge this colors elements as map with bulma colors (we can override them this way, no multiple definition for the same name)
31
+ $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert)))
32
+
33
+ @return $merged-colors
34
+
35
+ @function powerNumber($number, $exp)
36
+ $value: 1
37
+ @if $exp > 0
38
+ @for $i from 1 through $exp
39
+ $value: $value * $number
40
+ @else if $exp < 0
41
+ @for $i from 1 through -$exp
42
+ $value: $value / $number
43
+ @return $value
44
+
45
+ @function colorLuminance($color)
46
+ $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
47
+ @each $name, $value in $color-rgb
48
+ $adjusted: 0
49
+ $value: $value / 255
50
+ @if $value < 0.03928
51
+ $value: $value / 12.92
52
+ @else
53
+ $value: ($value + .055) / 1.055
54
+ $value: powerNumber($value, 2)
55
+ $color-rgb: map-merge($color-rgb, ($name: $value))
56
+ @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
57
+
58
+ @function findColorInvert($color)
59
+ @if (colorLuminance($color) > 0.55)
60
+ @return rgba(#000, 0.7)
61
+ @else
62
+ @return #fff
@@ -0,0 +1,76 @@
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
+
13
+ $white-ter: hsl(0, 0%, 96%) !default
14
+ $white-bis: hsl(0, 0%, 98%) !default
15
+ $white: hsl(0, 0%, 100%) !default
16
+
17
+ $orange: hsl(14, 100%, 53%) !default
18
+ $yellow: hsl(48, 100%, 67%) !default
19
+ $green: hsl(141, 71%, 48%) !default
20
+ $turquoise: hsl(171, 100%, 41%) !default
21
+ $cyan: hsl(204, 86%, 53%) !default
22
+ $blue: hsl(217, 71%, 53%) !default
23
+ $purple: hsl(271, 100%, 71%) !default
24
+ $red: hsl(348, 100%, 61%) !default
25
+
26
+ // Typography
27
+
28
+ $family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
29
+ $family-monospace: monospace !default
30
+ $render-mode: optimizeLegibility !default
31
+
32
+ $size-1: 3rem !default
33
+ $size-2: 2.5rem !default
34
+ $size-3: 2rem !default
35
+ $size-4: 1.5rem !default
36
+ $size-5: 1.25rem !default
37
+ $size-6: 1rem !default
38
+ $size-7: 0.75rem !default
39
+
40
+ $weight-light: 300 !default
41
+ $weight-normal: 400 !default
42
+ $weight-medium: 500 !default
43
+ $weight-semibold: 600 !default
44
+ $weight-bold: 700 !default
45
+
46
+ // Spacing
47
+
48
+ $block-spacing: 1.5rem !default
49
+
50
+ // Responsiveness
51
+
52
+ // The container horizontal gap, which acts as the offset for breakpoints
53
+ $gap: 32px !default
54
+ // 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
55
+ $tablet: 769px !default
56
+ // 960px container + 4rem
57
+ $desktop: 960px + (2 * $gap) !default
58
+ // 1152px container + 4rem
59
+ $widescreen: 1152px + (2 * $gap) !default
60
+ $widescreen-enabled: true !default
61
+ // 1344px container + 4rem
62
+ $fullhd: 1344px + (2 * $gap) !default
63
+ $fullhd-enabled: true !default
64
+
65
+ // Miscellaneous
66
+
67
+ $easing: ease-out !default
68
+ $radius-small: 2px !default
69
+ $radius: 4px !default
70
+ $radius-large: 6px !default
71
+ $radius-rounded: 290486px !default
72
+ $speed: 86ms !default
73
+
74
+ // Flags
75
+
76
+ $variable-columns: true !default
@@ -0,0 +1,261 @@
1
+ @import "initial-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: rgba(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
+ // Placeholders
132
+
133
+ =unselectable
134
+ -webkit-touch-callout: none
135
+ -webkit-user-select: none
136
+ -moz-user-select: none
137
+ -ms-user-select: none
138
+ user-select: none
139
+
140
+ %unselectable
141
+ +unselectable
142
+
143
+ =arrow($color: transparent)
144
+ border: 3px solid $color
145
+ border-radius: 2px
146
+ border-right: 0
147
+ border-top: 0
148
+ content: " "
149
+ display: block
150
+ height: 0.625em
151
+ margin-top: -0.4375em
152
+ pointer-events: none
153
+ position: absolute
154
+ top: 50%
155
+ transform: rotate(-45deg)
156
+ transform-origin: center
157
+ width: 0.625em
158
+
159
+ %arrow
160
+ +arrow
161
+
162
+ =block($spacing: $block-spacing)
163
+ &:not(:last-child)
164
+ margin-bottom: $spacing
165
+
166
+ %block
167
+ +block
168
+
169
+ =delete
170
+ @extend %unselectable
171
+ -moz-appearance: none
172
+ -webkit-appearance: none
173
+ background-color: rgba($black, 0.2)
174
+ border: none
175
+ border-radius: $radius-rounded
176
+ cursor: pointer
177
+ pointer-events: auto
178
+ display: inline-block
179
+ flex-grow: 0
180
+ flex-shrink: 0
181
+ font-size: 0
182
+ height: 20px
183
+ max-height: 20px
184
+ max-width: 20px
185
+ min-height: 20px
186
+ min-width: 20px
187
+ outline: none
188
+ position: relative
189
+ vertical-align: top
190
+ width: 20px
191
+ &::before,
192
+ &::after
193
+ background-color: $white
194
+ content: ""
195
+ display: block
196
+ left: 50%
197
+ position: absolute
198
+ top: 50%
199
+ transform: translateX(-50%) translateY(-50%) rotate(45deg)
200
+ transform-origin: center center
201
+ &::before
202
+ height: 2px
203
+ width: 50%
204
+ &::after
205
+ height: 50%
206
+ width: 2px
207
+ &:hover,
208
+ &:focus
209
+ background-color: rgba($black, 0.3)
210
+ &:active
211
+ background-color: rgba($black, 0.4)
212
+ // Sizes
213
+ &.is-small
214
+ height: 16px
215
+ max-height: 16px
216
+ max-width: 16px
217
+ min-height: 16px
218
+ min-width: 16px
219
+ width: 16px
220
+ &.is-medium
221
+ height: 24px
222
+ max-height: 24px
223
+ max-width: 24px
224
+ min-height: 24px
225
+ min-width: 24px
226
+ width: 24px
227
+ &.is-large
228
+ height: 32px
229
+ max-height: 32px
230
+ max-width: 32px
231
+ min-height: 32px
232
+ min-width: 32px
233
+ width: 32px
234
+
235
+ %delete
236
+ +delete
237
+
238
+ =loader
239
+ animation: spinAround 500ms infinite linear
240
+ border: 2px solid $grey-lighter
241
+ border-radius: $radius-rounded
242
+ border-right-color: transparent
243
+ border-top-color: transparent
244
+ content: ""
245
+ display: block
246
+ height: 1em
247
+ position: relative
248
+ width: 1em
249
+
250
+ %loader
251
+ +loader
252
+
253
+ =overlay($offset: 0)
254
+ bottom: $offset
255
+ left: $offset
256
+ position: absolute
257
+ right: $offset
258
+ top: $offset
259
+
260
+ %overlay
261
+ +overlay