bulma-rails 0.9.3 → 1.0.0

data/app/assets/stylesheets/sass/elements/button.sass

@@ -1,345 +0,0 @@
-@import "../utilities/controls"
-@import "../utilities/mixins"
-
-$button-color: $text-strong !default
-$button-background-color: $scheme-main !default
-$button-family: false !default
-
-$button-border-color: $border !default
-$button-border-width: $control-border-width !default
-
-$button-padding-vertical: calc(0.5em - #{$button-border-width}) !default
-$button-padding-horizontal: 1em !default
-
-$button-hover-color: $link-hover !default
-$button-hover-border-color: $link-hover-border !default
-
-$button-focus-color: $link-focus !default
-$button-focus-border-color: $link-focus-border !default
-$button-focus-box-shadow-size: 0 0 0 0.125em !default
-$button-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
-
-$button-active-color: $link-active !default
-$button-active-border-color: $link-active-border !default
-
-$button-text-color: $text !default
-$button-text-decoration: underline !default
-$button-text-hover-background-color: $background !default
-$button-text-hover-color: $text-strong !default
-
-$button-ghost-background: none !default
-$button-ghost-border-color: transparent !default
-$button-ghost-color: $link !default
-$button-ghost-decoration: none !default
-$button-ghost-hover-color: $link !default
-$button-ghost-hover-decoration: underline !default
-
-$button-disabled-background-color: $scheme-main !default
-$button-disabled-border-color: $border !default
-$button-disabled-shadow: none !default
-$button-disabled-opacity: 0.5 !default
-
-$button-static-color: $text-light !default
-$button-static-background-color: $scheme-main-ter !default
-$button-static-border-color: $border !default
-
-$button-colors: $colors !default
-
-// The button sizes use mixins so they can be used at different breakpoints
-=button-small
-  &:not(.is-rounded)
-    border-radius: $radius-small
-  font-size: $size-small
-=button-normal
-  font-size: $size-normal
-=button-medium
-  font-size: $size-medium
-=button-large
-  font-size: $size-large
-
-.button
-  @extend %control
-  @extend %unselectable
-  background-color: $button-background-color
-  border-color: $button-border-color
-  border-width: $button-border-width
-  color: $button-color
-  cursor: pointer
-  @if $button-family
-    font-family: $button-family
-  justify-content: center
-  padding-bottom: $button-padding-vertical
-  padding-left: $button-padding-horizontal
-  padding-right: $button-padding-horizontal
-  padding-top: $button-padding-vertical
-  text-align: center
-  white-space: nowrap
-  strong
-    color: inherit
-  .icon
-    &,
-    &.is-small,
-    &.is-medium,
-    &.is-large
-      height: 1.5em
-      width: 1.5em
-    &:first-child:not(:last-child)
-      +ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}), false)
-      +ltr-property("margin", $button-padding-horizontal * 0.25)
-    &:last-child:not(:first-child)
-      +ltr-property("margin", $button-padding-horizontal * 0.25, false)
-      +ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}))
-    &:first-child:last-child
-      margin-left: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
-      margin-right: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
-  // States
-  &:hover,
-  &.is-hovered
-    border-color: $button-hover-border-color
-    color: $button-hover-color
-  &:focus,
-  &.is-focused
-    border-color: $button-focus-border-color
-    color: $button-focus-color
-    &:not(:active)
-      box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color
-  &:active,
-  &.is-active
-    border-color: $button-active-border-color
-    color: $button-active-color
-  // Colors
-  &.is-text
-    background-color: transparent
-    border-color: transparent
-    color: $button-text-color
-    text-decoration: $button-text-decoration
-    &:hover,
-    &.is-hovered,
-    &:focus,
-    &.is-focused
-      background-color: $button-text-hover-background-color
-      color: $button-text-hover-color
-    &:active,
-    &.is-active
-      background-color: bulmaDarken($button-text-hover-background-color, 5%)
-      color: $button-text-hover-color
-    &[disabled],
-    fieldset[disabled] &
-      background-color: transparent
-      border-color: transparent
-      box-shadow: none
-  &.is-ghost
-    background: $button-ghost-background
-    border-color: $button-ghost-border-color
-    color: $button-ghost-color
-    text-decoration: $button-ghost-decoration
-    &:hover,
-    &.is-hovered
-      color: $button-ghost-hover-color
-      text-decoration: $button-ghost-hover-decoration
-  @each $name, $pair in $button-colors
-    $color: nth($pair, 1)
-    $color-invert: nth($pair, 2)
-    &.is-#{$name}
-      background-color: $color
-      border-color: transparent
-      color: $color-invert
-      &:hover,
-      &.is-hovered
-        background-color: bulmaDarken($color, 2.5%)
-        border-color: transparent
-        color: $color-invert
-      &:focus,
-      &.is-focused
-        border-color: transparent
-        color: $color-invert
-        &:not(:active)
-          box-shadow: $button-focus-box-shadow-size bulmaRgba($color, 0.25)
-      &:active,
-      &.is-active
-        background-color: bulmaDarken($color, 5%)
-        border-color: transparent
-        color: $color-invert
-      &[disabled],
-      fieldset[disabled] &
-        background-color: $color
-        border-color: transparent
-        box-shadow: none
-      &.is-inverted
-        background-color: $color-invert
-        color: $color
-        &:hover,
-        &.is-hovered
-          background-color: bulmaDarken($color-invert, 5%)
-        &[disabled],
-        fieldset[disabled] &
-          background-color: $color-invert
-          border-color: transparent
-          box-shadow: none
-          color: $color
-      &.is-loading
-        &::after
-          border-color: transparent transparent $color-invert $color-invert !important
-      &.is-outlined
-        background-color: transparent
-        border-color: $color
-        color: $color
-        &:hover,
-        &.is-hovered,
-        &:focus,
-        &.is-focused
-          background-color: $color
-          border-color: $color
-          color: $color-invert
-        &.is-loading
-          &::after
-            border-color: transparent transparent $color $color !important
-          &:hover,
-          &.is-hovered,
-          &:focus,
-          &.is-focused
-            &::after
-              border-color: transparent transparent $color-invert $color-invert !important
-        &[disabled],
-        fieldset[disabled] &
-          background-color: transparent
-          border-color: $color
-          box-shadow: none
-          color: $color
-      &.is-inverted.is-outlined
-        background-color: transparent
-        border-color: $color-invert
-        color: $color-invert
-        &:hover,
-        &.is-hovered,
-        &:focus,
-        &.is-focused
-          background-color: $color-invert
-          color: $color
-        &.is-loading
-          &:hover,
-          &.is-hovered,
-          &:focus,
-          &.is-focused
-            &::after
-              border-color: transparent transparent $color $color !important
-        &[disabled],
-        fieldset[disabled] &
-          background-color: transparent
-          border-color: $color-invert
-          box-shadow: none
-          color: $color-invert
-      // If light and dark colors are provided
-      @if length($pair) >= 4
-        $color-light: nth($pair, 3)
-        $color-dark: nth($pair, 4)
-        &.is-light
-          background-color: $color-light
-          color: $color-dark
-          &:hover,
-          &.is-hovered
-            background-color: bulmaDarken($color-light, 2.5%)
-            border-color: transparent
-            color: $color-dark
-          &:active,
-          &.is-active
-            background-color: bulmaDarken($color-light, 5%)
-            border-color: transparent
-            color: $color-dark
-  // Sizes
-  &.is-small
-    +button-small
-  &.is-normal
-    +button-normal
-  &.is-medium
-    +button-medium
-  &.is-large
-    +button-large
-  // Modifiers
-  &[disabled],
-  fieldset[disabled] &
-    background-color: $button-disabled-background-color
-    border-color: $button-disabled-border-color
-    box-shadow: $button-disabled-shadow
-    opacity: $button-disabled-opacity
-  &.is-fullwidth
-    display: flex
-    width: 100%
-  &.is-loading
-    color: transparent !important
-    pointer-events: none
-    &::after
-      @extend %loader
-      +center(1em)
-      position: absolute !important
-  &.is-static
-    background-color: $button-static-background-color
-    border-color: $button-static-border-color
-    color: $button-static-color
-    box-shadow: none
-    pointer-events: none
-  &.is-rounded
-    border-radius: $radius-rounded
-    padding-left: calc(#{$button-padding-horizontal} + 0.25em)
-    padding-right: calc(#{$button-padding-horizontal} + 0.25em)
-
-.buttons
-  align-items: center
-  display: flex
-  flex-wrap: wrap
-  justify-content: flex-start
-  .button
-    margin-bottom: 0.5rem
-    &:not(:last-child):not(.is-fullwidth)
-      +ltr-property("margin", 0.5rem)
-  &:last-child
-    margin-bottom: -0.5rem
-  &:not(:last-child)
-    margin-bottom: 1rem
-  // Sizes
-  &.are-small
-    .button:not(.is-normal):not(.is-medium):not(.is-large)
-      +button-small
-  &.are-medium
-    .button:not(.is-small):not(.is-normal):not(.is-large)
-      +button-medium
-  &.are-large
-    .button:not(.is-small):not(.is-normal):not(.is-medium)
-      +button-large
-  &.has-addons
-    .button
-      &:not(:first-child)
-        border-bottom-left-radius: 0
-        border-top-left-radius: 0
-      &:not(:last-child)
-        border-bottom-right-radius: 0
-        border-top-right-radius: 0
-        +ltr-property("margin", -1px)
-      &:last-child
-        +ltr-property("margin", 0)
-      &:hover,
-      &.is-hovered
-        z-index: 2
-      &:focus,
-      &.is-focused,
-      &:active,
-      &.is-active,
-      &.is-selected
-        z-index: 3
-        &:hover
-          z-index: 4
-      &.is-expanded
-        flex-grow: 1
-        flex-shrink: 1
-  &.is-centered
-    justify-content: center
-    &:not(.has-addons)
-      .button:not(.is-fullwidth)
-        margin-left: 0.25rem
-        margin-right: 0.25rem
-  &.is-right
-    justify-content: flex-end
-    &:not(.has-addons)
-      .button:not(.is-fullwidth)
-        margin-left: 0.25rem
-        margin-right: 0.25rem

data/app/assets/stylesheets/sass/elements/container.sass

@@ -1,29 +0,0 @@
-@import "../utilities/mixins"
-
-$container-offset: (2 * $gap) !default
-$container-max-width: $fullhd !default
-
-.container
-  flex-grow: 1
-  margin: 0 auto
-  position: relative
-  width: auto
-  &.is-fluid
-    max-width: none !important
-    padding-left: $gap
-    padding-right: $gap
-    width: 100%
-  +desktop
-    max-width: $desktop - $container-offset
-  +until-widescreen
-    &.is-widescreen:not(.is-max-desktop)
-      max-width: min($widescreen, $container-max-width) - $container-offset
-  +until-fullhd
-    &.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen)
-      max-width: min($fullhd, $container-max-width) - $container-offset
-  +widescreen
-    &:not(.is-max-desktop)
-      max-width: min($widescreen, $container-max-width) - $container-offset
-  +fullhd
-    &:not(.is-max-desktop):not(.is-max-widescreen)
-      max-width: min($fullhd, $container-max-width) - $container-offset

data/app/assets/stylesheets/sass/elements/content.sass

@@ -1,159 +0,0 @@
-@import "../utilities/mixins"
-
-$content-heading-color: $text-strong !default
-$content-heading-weight: $weight-semibold !default
-$content-heading-line-height: 1.125 !default
-
-$content-blockquote-background-color: $background !default
-$content-blockquote-border-left: 5px solid $border !default
-$content-blockquote-padding: 1.25em 1.5em !default
-
-$content-pre-padding: 1.25em 1.5em !default
-
-$content-table-cell-border: 1px solid $border !default
-$content-table-cell-border-width: 0 0 1px !default
-$content-table-cell-padding: 0.5em 0.75em !default
-$content-table-cell-heading-color: $text-strong !default
-$content-table-head-cell-border-width: 0 0 2px !default
-$content-table-head-cell-color: $text-strong !default
-$content-table-foot-cell-border-width: 2px 0 0 !default
-$content-table-foot-cell-color: $text-strong !default
-
-.content
-  @extend %block
-  // Inline
-  li + li
-    margin-top: 0.25em
-  // Block
-  p,
-  dl,
-  ol,
-  ul,
-  blockquote,
-  pre,
-  table
-    &:not(:last-child)
-      margin-bottom: 1em
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6
-    color: $content-heading-color
-    font-weight: $content-heading-weight
-    line-height: $content-heading-line-height
-  h1
-    font-size: 2em
-    margin-bottom: 0.5em
-    &:not(:first-child)
-      margin-top: 1em
-  h2
-    font-size: 1.75em
-    margin-bottom: 0.5714em
-    &:not(:first-child)
-      margin-top: 1.1428em
-  h3
-    font-size: 1.5em
-    margin-bottom: 0.6666em
-    &:not(:first-child)
-      margin-top: 1.3333em
-  h4
-    font-size: 1.25em
-    margin-bottom: 0.8em
-  h5
-    font-size: 1.125em
-    margin-bottom: 0.8888em
-  h6
-    font-size: 1em
-    margin-bottom: 1em
-  blockquote
-    background-color: $content-blockquote-background-color
-    +ltr-property("border", $content-blockquote-border-left, false)
-    padding: $content-blockquote-padding
-  ol
-    list-style-position: outside
-    +ltr-property("margin", 2em, false)
-    margin-top: 1em
-    &:not([type])
-      list-style-type: decimal
-      &.is-lower-alpha
-        list-style-type: lower-alpha
-      &.is-lower-roman
-        list-style-type: lower-roman
-      &.is-upper-alpha
-        list-style-type: upper-alpha
-      &.is-upper-roman
-        list-style-type: upper-roman
-  ul
-    list-style: disc outside
-    +ltr-property("margin", 2em, false)
-    margin-top: 1em
-    ul
-      list-style-type: circle
-      margin-top: 0.5em
-      ul
-        list-style-type: square
-  dd
-    +ltr-property("margin", 2em, false)
-  figure
-    margin-left: 2em
-    margin-right: 2em
-    text-align: center
-    &:not(:first-child)
-      margin-top: 2em
-    &:not(:last-child)
-      margin-bottom: 2em
-    img
-      display: inline-block
-    figcaption
-      font-style: italic
-  pre
-    +overflow-touch
-    overflow-x: auto
-    padding: $content-pre-padding
-    white-space: pre
-    word-wrap: normal
-  sup,
-  sub
-    font-size: 75%
-  table
-    width: 100%
-    td,
-    th
-      border: $content-table-cell-border
-      border-width: $content-table-cell-border-width
-      padding: $content-table-cell-padding
-      vertical-align: top
-    th
-      color: $content-table-cell-heading-color
-      &:not([align])
-        text-align: inherit
-    thead
-      td,
-      th
-        border-width: $content-table-head-cell-border-width
-        color: $content-table-head-cell-color
-    tfoot
-      td,
-      th
-        border-width: $content-table-foot-cell-border-width
-        color: $content-table-foot-cell-color
-    tbody
-      tr
-        &:last-child
-          td,
-          th
-            border-bottom-width: 0
-  .tabs
-    li + li
-      margin-top: 0
-  // Sizes
-  &.is-small
-    font-size: $size-small
-  &.is-normal
-    font-size: $size-normal
-  &.is-medium
-    font-size: $size-medium
-  &.is-large
-    font-size: $size-large

data/app/assets/stylesheets/sass/elements/form.sass

@@ -1 +0,0 @@
-@warn "The form.sass file is DEPRECATED. It has moved into its own /form folder. Please import sass/form/_all instead."

data/app/assets/stylesheets/sass/elements/icon.sass

@@ -1,46 +0,0 @@
-$icon-dimensions: 1.5rem !default
-$icon-dimensions-small: 1rem !default
-$icon-dimensions-medium: 2rem !default
-$icon-dimensions-large: 3rem !default
-$icon-text-spacing: 0.25em !default
-
-.icon
-  align-items: center
-  display: inline-flex
-  justify-content: center
-  height: $icon-dimensions
-  width: $icon-dimensions
-  // Sizes
-  &.is-small
-    height: $icon-dimensions-small
-    width: $icon-dimensions-small
-  &.is-medium
-    height: $icon-dimensions-medium
-    width: $icon-dimensions-medium
-  &.is-large
-    height: $icon-dimensions-large
-    width: $icon-dimensions-large
-
-.icon-text
-  align-items: flex-start
-  color: inherit
-  display: inline-flex
-  flex-wrap: wrap
-  line-height: $icon-dimensions
-  vertical-align: top
-  .icon
-    flex-grow: 0
-    flex-shrink: 0
-    &:not(:last-child)
-      +ltr
-        margin-right: $icon-text-spacing
-      +rtl
-        margin-left: $icon-text-spacing
-    &:not(:first-child)
-      +ltr
-        margin-left: $icon-text-spacing
-      +rtl
-        margin-right: $icon-text-spacing
-
-div.icon-text
-  display: flex

data/app/assets/stylesheets/sass/elements/image.sass

@@ -1,73 +0,0 @@
-@import "../utilities/mixins"
-
-$dimensions: 16 24 32 48 64 96 128 !default
-
-.image
-  display: block
-  position: relative
-  img
-    display: block
-    height: auto
-    width: 100%
-    &.is-rounded
-      border-radius: $radius-rounded
-  &.is-fullwidth
-    width: 100%
-  // Ratio
-  &.is-square,
-  &.is-1by1,
-  &.is-5by4,
-  &.is-4by3,
-  &.is-3by2,
-  &.is-5by3,
-  &.is-16by9,
-  &.is-2by1,
-  &.is-3by1,
-  &.is-4by5,
-  &.is-3by4,
-  &.is-2by3,
-  &.is-3by5,
-  &.is-9by16,
-  &.is-1by2,
-  &.is-1by3
-    img,
-    .has-ratio
-      @extend %overlay
-      height: 100%
-      width: 100%
-  &.is-square,
-  &.is-1by1
-    padding-top: 100%
-  &.is-5by4
-    padding-top: 80%
-  &.is-4by3
-    padding-top: 75%
-  &.is-3by2
-    padding-top: 66.6666%
-  &.is-5by3
-    padding-top: 60%
-  &.is-16by9
-    padding-top: 56.25%
-  &.is-2by1
-    padding-top: 50%
-  &.is-3by1
-    padding-top: 33.3333%
-  &.is-4by5
-    padding-top: 125%
-  &.is-3by4
-    padding-top: 133.3333%
-  &.is-2by3
-    padding-top: 150%
-  &.is-3by5
-    padding-top: 166.6666%
-  &.is-9by16
-    padding-top: 177.7777%
-  &.is-1by2
-    padding-top: 200%
-  &.is-1by3
-    padding-top: 300%
-  // Sizes
-  @each $dimension in $dimensions
-    &.is-#{$dimension}x#{$dimension}
-      height: $dimension * 1px
-      width: $dimension * 1px

data/app/assets/stylesheets/sass/elements/notification.sass

@@ -1,52 +0,0 @@
-@import "../utilities/mixins"
-
-$notification-background-color: $background !default
-$notification-code-background-color: $scheme-main !default
-$notification-radius: $radius !default
-$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
-$notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem !default
-$notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default
-
-$notification-colors: $colors !default
-
-.notification
-  @extend %block
-  background-color: $notification-background-color
-  border-radius: $notification-radius
-  position: relative
-  +ltr
-    padding: $notification-padding-ltr
-  +rtl
-    padding: $notification-padding-rtl
-  a:not(.button):not(.dropdown-item)
-    color: currentColor
-    text-decoration: underline
-  strong
-    color: currentColor
-  code,
-  pre
-    background: $notification-code-background-color
-  pre code
-    background: transparent
-  & > .delete
-    +ltr-position(0.5rem)
-    position: absolute
-    top: 0.5rem
-  .title,
-  .subtitle,
-  .content
-    color: currentColor
-  // Colors
-  @each $name, $pair in $notification-colors
-    $color: nth($pair, 1)
-    $color-invert: nth($pair, 2)
-    &.is-#{$name}
-      background-color: $color
-      color: $color-invert
-      // If light and dark colors are provided
-      @if length($pair) >= 4
-        $color-light: nth($pair, 3)
-        $color-dark: nth($pair, 4)
-        &.is-light
-          background-color: $color-light
-          color: $color-dark