Fix mixins/extends confusion

docs/_data/global.json

@@ -29,6 +29,22 @@
       "title": "Love"
     }
   ],
+  "other_items": [
+    {
+      "id": "templates",
+      "color": "has-text-info",
+      "fa_type": "fas",
+      "fa_icon": "fa-code",
+      "title": "Templates"
+    },
+    {
+      "id": "recipes",
+      "color": "has-text-purple",
+      "fa_type": "fas",
+      "fa_icon": "fa-utensils",
+      "title": "Recipes"
+    },
+  ],
   "more_items": [
     {
       "id": "bulma-start",

sass/base/helpers.sass

@@ -17,7 +17,7 @@
 // Overlay
 
 .is-overlay
-  +overlay
+  @extend %overlay
 
 // Typography
 
@@ -258,4 +258,4 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
   box-shadow: none !important
 
 .is-unselectable
-  +unselectable
+  @extend %unselectable

sass/components/breadcrumb.sass

@@ -8,8 +8,8 @@ $breadcrumb-item-padding-horizontal: 0.75em !default
 $breadcrumb-item-separator-color: $grey-light !default
 
 .breadcrumb
-  +block
+  @extend %block
-  +unselectable
+  @extend %unselectable
   font-size: $size-normal
   white-space: nowrap
   a

sass/components/level.sass

@@ -1,5 +1,5 @@
 .level
-  +block
+  @extend %block
   align-items: center
   justify-content: space-between
   code

sass/components/message.sass

@@ -19,7 +19,7 @@ $message-body-pre-code-background-color: transparent !default
 $message-header-body-border-width: 0 !default
 
 .message
-  +block
+  @extend %block
   background-color: $message-background-color
   border-radius: $message-radius
   font-size: $size-normal

sass/components/modal.sass

@@ -29,7 +29,7 @@ $modal-card-body-background-color: $white !default
 $modal-card-body-padding: 20px !default
 
 .modal
-  +overlay
+  @extend %overlay
   align-items: center
   display: none
   flex-direction: column
@@ -42,7 +42,7 @@ $modal-card-body-padding: 20px !default
     display: flex
 
 .modal-background
-  +overlay
+  @extend %overlay
   background-color: $modal-background-background-color
 
 .modal-content,
@@ -59,7 +59,7 @@ $modal-card-body-padding: 20px !default
     width: $modal-content-width
 
 .modal-close
-  +delete
+  @extend %delete
   background: none
   height: $modal-close-dimensions
   position: fixed

sass/components/navbar.sass

@@ -201,7 +201,8 @@ a.navbar-item,
 .navbar-link:not(.is-arrowless)
   padding-right: 2.5em
   &::after
-    +arrow($navbar-dropdown-arrow)
+    @extend %arrow
+    border-color: $navbar-dropdown-arrow
     margin-top: -0.375em
     right: 1.125em
 

sass/components/pagination.sass

@@ -54,7 +54,7 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
 .pagination-link,
 .pagination-ellipsis
   +control
-  +unselectable
+  @extend %unselectable
   font-size: 1em
   padding-left: 0.5em
   padding-right: 0.5em

sass/components/tabs.sass

@@ -27,9 +27,9 @@ $tabs-toggle-link-active-border-color: $link !default
 $tabs-toggle-link-active-color: $link-invert !default
 
 .tabs
-  +block
+  @extend %block
   +overflow-touch
-  +unselectable
+  @extend %unselectable
   align-items: stretch
   display: flex
   font-size: $size-normal

sass/elements/box.sass

@@ -8,7 +8,7 @@ $box-link-hover-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link !default
 $box-link-active-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link !default
 
 .box
-  +block
+  @extend %block
   background-color: $box-background-color
   border-radius: $box-radius
   box-shadow: $box-shadow

sass/elements/button.sass

@@ -42,7 +42,7 @@ $button-static-border-color: $grey-lighter !default
 
 .button
   +control
-  +unselectable
+  @extend %unselectable
   background-color: $button-background-color
   border-color: $button-border-color
   border-width: $button-border-width
@@ -198,7 +198,7 @@ $button-static-border-color: $grey-lighter !default
     color: transparent !important
     pointer-events: none
     &::after
-      +loader
+      @extend %loader
       +center(1em)
       position: absolute !important
   &.is-static

sass/elements/content.sass

@@ -18,7 +18,7 @@ $content-table-foot-cell-border-width: 2px 0 0 !default
 $content-table-foot-cell-color: $text-strong !default
 
 .content
-  +block
+  @extend %block
   // Inline
   li + li
     margin-top: 0.25em

sass/elements/form.sass

@@ -151,7 +151,8 @@ $help-size: $size-small !default
     height: 2.25em
   &:not(.is-multiple):not(.is-loading)
     &::after
-      +arrow($input-arrow)
+      @extend %arrow
+      border-color: $input-arrow
       right: 1.125em
       z-index: 4
   &.is-rounded
@@ -213,7 +214,7 @@ $help-size: $size-small !default
       width: 100%
   &.is-loading
     &::after
-      +loader
+      @extend %loader
       margin-top: 0
       position: absolute
       right: 0.625em
@@ -227,7 +228,7 @@ $help-size: $size-small !default
       font-size: $size-large
 
 .file
-  +unselectable
+  @extend %unselectable
   align-items: stretch
   display: flex
   justify-content: flex-start
@@ -614,7 +615,7 @@ $help-size: $size-small !default
       right: 0
   &.is-loading
     &::after
-      +loader
+      @extend %loader
       position: absolute !important
       right: 0.625em
       top: 0.625em

sass/elements/image.sass

@@ -27,7 +27,7 @@ $dimensions: 16 24 32 48 64 96 128 !default
   &.is-1by2,
   &.is-1by3
     img
-      +overlay
+      @extend %overlay
       height: 100%
       width: 100%
   &.is-square,

sass/elements/notification.sass

@@ -3,7 +3,7 @@ $notification-radius: $radius !default
 $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
 
 .notification
-  +block
+  @extend %block
   background-color: $notification-background-color
   border-radius: $notification-radius
   padding: $notification-padding

sass/elements/other.sass

@@ -1,8 +1,8 @@
 .block
-  +block
+  @extend %block
 
 .delete
-  +delete
+  @extend %delete
 
 .heading
   display: block
@@ -12,7 +12,7 @@
   text-transform: uppercase
 
 .highlight
-  +block
+  @extend %block
   font-weight: $weight-normal
   max-width: 100%
   overflow: hidden
@@ -22,7 +22,7 @@
     max-width: 100%
 
 .loader
-  +loader
+  @extend %loader
 
 .number
   align-items: center

sass/elements/progress.sass

@@ -2,7 +2,7 @@ $progress-bar-background-color: $border !default
 $progress-value-background-color: $text !default
 
 .progress
-  +block
+  @extend %block
   -moz-appearance: none
   -webkit-appearance: none
   border: none

sass/elements/table.sass

@@ -20,7 +20,7 @@ $table-striped-row-even-background-color: $white-bis !default
 $table-striped-row-even-hover-background-color: $white-ter !default
 
 .table
-  +block
+  @extend %block
   background-color: $table-background-color
   color: $table-color
   td,
@@ -110,7 +110,7 @@ $table-striped-row-even-hover-background-color: $white-ter !default
           background-color: $table-striped-row-even-background-color
 
 .table-container
-  +block
+  @extend %block
   +overflow-touch
   overflow: auto
   overflow-y: hidden

sass/elements/title.sass

@@ -17,7 +17,7 @@ $subtitle-negative-margin: -1.25rem !default
 
 .title,
 .subtitle
-  +block
+  @extend %block
   word-break: break-word
   em,
   span

sass/layout/hero.sass

@@ -112,7 +112,7 @@
 // Components
 
 .hero-video
-  +overlay
+  @extend %overlay
   overflow: hidden
   video
     left: 50%

sass/utilities/mixins.sass

@@ -251,16 +251,11 @@
   +loader
 
 =overlay($offset: 0)
-  bottom: 0
+  bottom: $offset
-  left: 0
+  left: $offset
   position: absolute
-  right: 0
+  right: $offset
-  top: 0
+  top: $offset
-  @if $offset != 0
-    bottom: $offset
-    left: $offset
-    right: $offset
-    top: $offset
 
 %overlay
   +overlay