bulma-rails 0.9.0 → 1.0.0

data/app/assets/stylesheets/sass/helpers/typography.sass

@@ -1,98 +0,0 @@
-=typography-size($target:'')
-  @each $size in $sizes
-    $i: index($sizes, $size)
-    .is-size-#{$i}#{if($target == '', '', '-' + $target)}
-      font-size: $size !important
-
-+typography-size()
-
-+mobile
-  +typography-size('mobile')
-
-+tablet
-  +typography-size('tablet')
-
-+touch
-  +typography-size('touch')
-
-+desktop
-  +typography-size('desktop')
-
-+widescreen
-  +typography-size('widescreen')
-
-+fullhd
-  +typography-size('fullhd')
-
-$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right')
-
-@each $alignment, $text-align in $alignments
-  .has-text-#{$alignment}
-    text-align: #{$text-align} !important
-
-@each $alignment, $text-align in $alignments
-  +mobile
-    .has-text-#{$alignment}-mobile
-      text-align: #{$text-align} !important
-  +tablet
-    .has-text-#{$alignment}-tablet
-      text-align: #{$text-align} !important
-  +tablet-only
-    .has-text-#{$alignment}-tablet-only
-      text-align: #{$text-align} !important
-  +touch
-    .has-text-#{$alignment}-touch
-      text-align: #{$text-align} !important
-  +desktop
-    .has-text-#{$alignment}-desktop
-      text-align: #{$text-align} !important
-  +desktop-only
-    .has-text-#{$alignment}-desktop-only
-      text-align: #{$text-align} !important
-  +widescreen
-    .has-text-#{$alignment}-widescreen
-      text-align: #{$text-align} !important
-  +widescreen-only
-    .has-text-#{$alignment}-widescreen-only
-      text-align: #{$text-align} !important
-  +fullhd
-    .has-text-#{$alignment}-fullhd
-      text-align: #{$text-align} !important
-
-.is-capitalized
-  text-transform: capitalize !important
-
-.is-lowercase
-  text-transform: lowercase !important
-
-.is-uppercase
-  text-transform: uppercase !important
-
-.is-italic
-  font-style: italic !important
-
-.has-text-weight-light
-  font-weight: $weight-light !important
-.has-text-weight-normal
-  font-weight: $weight-normal !important
-.has-text-weight-medium
-  font-weight: $weight-medium !important
-.has-text-weight-semibold
-  font-weight: $weight-semibold !important
-.has-text-weight-bold
-  font-weight: $weight-bold !important
-
-.is-family-primary
-  font-family: $family-primary !important
-
-.is-family-secondary
-  font-family: $family-secondary !important
-
-.is-family-sans-serif
-  font-family: $family-sans-serif !important
-
-.is-family-monospace
-  font-family: $family-monospace !important
-
-.is-family-code
-  font-family: $family-code !important

data/app/assets/stylesheets/sass/helpers/visibility.sass

@@ -1,122 +0,0 @@
-
-
-$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
-
-@each $display in $displays
-  .is-#{$display}
-    display: #{$display} !important
-  +mobile
-    .is-#{$display}-mobile
-      display: #{$display} !important
-  +tablet
-    .is-#{$display}-tablet
-      display: #{$display} !important
-  +tablet-only
-    .is-#{$display}-tablet-only
-      display: #{$display} !important
-  +touch
-    .is-#{$display}-touch
-      display: #{$display} !important
-  +desktop
-    .is-#{$display}-desktop
-      display: #{$display} !important
-  +desktop-only
-    .is-#{$display}-desktop-only
-      display: #{$display} !important
-  +widescreen
-    .is-#{$display}-widescreen
-      display: #{$display} !important
-  +widescreen-only
-    .is-#{$display}-widescreen-only
-      display: #{$display} !important
-  +fullhd
-    .is-#{$display}-fullhd
-      display: #{$display} !important
-
-.is-hidden
-  display: none !important
-
-.is-sr-only
-  border: none !important
-  clip: rect(0, 0, 0, 0) !important
-  height: 0.01em !important
-  overflow: hidden !important
-  padding: 0 !important
-  position: absolute !important
-  white-space: nowrap !important
-  width: 0.01em !important
-
-+mobile
-  .is-hidden-mobile
-    display: none !important
-
-+tablet
-  .is-hidden-tablet
-    display: none !important
-
-+tablet-only
-  .is-hidden-tablet-only
-    display: none !important
-
-+touch
-  .is-hidden-touch
-    display: none !important
-
-+desktop
-  .is-hidden-desktop
-    display: none !important
-
-+desktop-only
-  .is-hidden-desktop-only
-    display: none !important
-
-+widescreen
-  .is-hidden-widescreen
-    display: none !important
-
-+widescreen-only
-  .is-hidden-widescreen-only
-    display: none !important
-
-+fullhd
-  .is-hidden-fullhd
-    display: none !important
-
-.is-invisible
-  visibility: hidden !important
-
-+mobile
-  .is-invisible-mobile
-    visibility: hidden !important
-
-+tablet
-  .is-invisible-tablet
-    visibility: hidden !important
-
-+tablet-only
-  .is-invisible-tablet-only
-    visibility: hidden !important
-
-+touch
-  .is-invisible-touch
-    visibility: hidden !important
-
-+desktop
-  .is-invisible-desktop
-    visibility: hidden !important
-
-+desktop-only
-  .is-invisible-desktop-only
-    visibility: hidden !important
-
-+widescreen
-  .is-invisible-widescreen
-    visibility: hidden !important
-
-+widescreen-only
-  .is-invisible-widescreen-only
-    visibility: hidden !important
-
-+fullhd
-  .is-invisible-fullhd
-    visibility: hidden !important

data/app/assets/stylesheets/sass/layout/_all.sass

@@ -1,5 +0,0 @@
-@charset "utf-8"
-
-@import "hero.sass"
-@import "section.sass"
-@import "footer.sass"

data/app/assets/stylesheets/sass/layout/footer.sass

@@ -1,9 +0,0 @@
-$footer-background-color: $scheme-main-bis !default
-$footer-color: false !default
-$footer-padding: 3rem 1.5rem 6rem !default
-
-.footer
-  background-color: $footer-background-color
-  padding: $footer-padding
-  @if $footer-color
-    color: $footer-color

data/app/assets/stylesheets/sass/layout/hero.sass

@@ -1,145 +0,0 @@
-$hero-body-padding: 3rem 1.5rem !default
-$hero-body-padding-small: 1.5rem !default
-$hero-body-padding-medium: 9rem 1.5rem !default
-$hero-body-padding-large: 18rem 1.5rem !default
-
-// Main container
-.hero
-  align-items: stretch
-  display: flex
-  flex-direction: column
-  justify-content: space-between
-  .navbar
-    background: none
-  .tabs
-    ul
-      border-bottom: none
-  // Colors
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    $color-invert: nth($pair, 2)
-    &.is-#{$name}
-      background-color: $color
-      color: $color-invert
-      a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
-      strong
-        color: inherit
-      .title
-        color: $color-invert
-      .subtitle
-        color: bulmaRgba($color-invert, 0.9)
-        a:not(.button),
-        strong
-          color: $color-invert
-      .navbar-menu
-        +touch
-          background-color: $color
-      .navbar-item,
-      .navbar-link
-        color: bulmaRgba($color-invert, 0.7)
-      a.navbar-item,
-      .navbar-link
-        &:hover,
-        &.is-active
-          background-color: bulmaDarken($color, 5%)
-          color: $color-invert
-      .tabs
-        a
-          color: $color-invert
-          opacity: 0.9
-          &:hover
-            opacity: 1
-        li
-          &.is-active a
-            opacity: 1
-        &.is-boxed,
-        &.is-toggle
-          a
-            color: $color-invert
-            &:hover
-              background-color: bulmaRgba($scheme-invert, 0.1)
-          li.is-active a
-            &,
-            &:hover
-              background-color: $color-invert
-              border-color: $color-invert
-              color: $color
-      // Modifiers
-      @if type-of($color) == 'color'
-        &.is-bold
-          $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
-          $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
-          background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
-          +mobile
-            .navbar-menu
-              background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
-  // Sizes
-  &.is-small
-    .hero-body
-      padding: $hero-body-padding-small
-  &.is-medium
-    +tablet
-      .hero-body
-        padding: $hero-body-padding-medium
-  &.is-large
-    +tablet
-      .hero-body
-        padding: $hero-body-padding-large
-  &.is-halfheight,
-  &.is-fullheight,
-  &.is-fullheight-with-navbar
-    .hero-body
-      align-items: center
-      display: flex
-      & > .container
-        flex-grow: 1
-        flex-shrink: 1
-  &.is-halfheight
-    min-height: 50vh
-  &.is-fullheight
-    min-height: 100vh
-
-// Components
-
-.hero-video
-  @extend %overlay
-  overflow: hidden
-  video
-    left: 50%
-    min-height: 100%
-    min-width: 100%
-    position: absolute
-    top: 50%
-    transform: translate3d(-50%, -50%, 0)
-  // Modifiers
-  &.is-transparent
-    opacity: 0.3
-  // Responsiveness
-  +mobile
-    display: none
-
-.hero-buttons
-  margin-top: 1.5rem
-  // Responsiveness
-  +mobile
-    .button
-      display: flex
-      &:not(:last-child)
-        margin-bottom: 0.75rem
-  +tablet
-    display: flex
-    justify-content: center
-    .button:not(:last-child)
-      +ltr-property("margin", 1.5rem)
-
-// Containers
-
-.hero-head,
-.hero-foot
-  flex-grow: 0
-  flex-shrink: 0
-
-.hero-body
-  flex-grow: 1
-  flex-shrink: 0
-  padding: $hero-body-padding

data/app/assets/stylesheets/sass/layout/section.sass

@@ -1,13 +0,0 @@
-$section-padding: 3rem 1.5rem !default
-$section-padding-medium: 9rem 1.5rem !default
-$section-padding-large: 18rem 1.5rem !default
-
-.section
-  padding: $section-padding
-  // Responsiveness
-  +desktop
-    // Sizes
-    &.is-medium
-      padding: $section-padding-medium
-    &.is-large
-      padding: $section-padding-large

data/app/assets/stylesheets/sass/utilities/_all.sass

@@ -1,8 +0,0 @@
-@charset "utf-8"
-
-@import "initial-variables.sass"
-@import "functions.sass"
-@import "derived-variables.scss"
-@import "animations.sass"
-@import "mixins.sass"
-@import "controls.sass"

data/app/assets/stylesheets/sass/utilities/animations.sass

@@ -1,5 +0,0 @@
-@keyframes spinAround
-  from
-    transform: rotate(0deg)
-  to
-    transform: rotate(359deg)

data/app/assets/stylesheets/sass/utilities/controls.sass

@@ -1,50 +0,0 @@
-$control-radius: $radius !default
-$control-radius-small: $radius-small !default
-
-$control-border-width: 1px !default
-
-$control-height: 2.5em !default
-$control-line-height: 1.5 !default
-
-$control-padding-vertical: calc(0.5em - #{$control-border-width}) !default
-$control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default
-
-=control
-  -moz-appearance: none
-  -webkit-appearance: none
-  align-items: center
-  border: $control-border-width solid transparent
-  border-radius: $control-radius
-  box-shadow: none
-  display: inline-flex
-  font-size: $size-normal
-  height: $control-height
-  justify-content: flex-start
-  line-height: $control-line-height
-  padding-bottom: $control-padding-vertical
-  padding-left: $control-padding-horizontal
-  padding-right: $control-padding-horizontal
-  padding-top: $control-padding-vertical
-  position: relative
-  vertical-align: top
-  // States
-  &:focus,
-  &.is-focused,
-  &:active,
-  &.is-active
-    outline: none
-  &[disabled],
-  fieldset[disabled] &
-    cursor: not-allowed
-
-%control
-  +control
-
-// The controls sizes use mixins so they can be used at different breakpoints
-=control-small
-  border-radius: $control-radius-small
-  font-size: $size-small
-=control-medium
-  font-size: $size-medium
-=control-large
-  font-size: $size-large

data/app/assets/stylesheets/sass/utilities/functions.sass

@@ -1,115 +0,0 @@
-@function mergeColorMaps($bulma-colors, $custom-colors)
-  // We return at least Bulma's hard-coded colors
-  $merged-colors: $bulma-colors
-
-  // We want a map as input
-  @if type-of($custom-colors) == 'map'
-    @each $name, $components in $custom-colors
-      // The color name should be a string
-      // and the components either a single color
-      // or a colors list with at least one element
-      @if type-of($name) == 'string' and (type-of($components) == 'list' or type-of($components) == 'color') and length($components) >= 1
-        $color-base: null
-        $color-invert: null
-        $color-light: null
-        $color-dark: null
-        $value: null
-
-        // The param can either be a single color
-        // or a list of 2 colors
-        @if type-of($components) == 'color'
-          $color-base: $components
-          $color-invert: findColorInvert($color-base)
-          $color-light: findLightColor($color-base)
-          $color-dark: findDarkColor($color-base)
-        @else if type-of($components) == 'list'
-          $color-base: nth($components, 1)
-          // If Invert, Light and Dark are provided
-          @if length($components) > 3
-            $color-invert: nth($components, 2)
-            $color-light: nth($components, 3)
-            $color-dark: nth($components, 4)
-            // If only Invert and Light are provided
-          @else if length($components) > 2
-            $color-invert: nth($components, 2)
-            $color-light: nth($components, 3)
-            $color-dark: findDarkColor($color-base)
-            // If only Invert is provided
-          @else
-            $color-invert: nth($components, 2)
-            $color-light: findLightColor($color-base)
-            $color-dark: findDarkColor($color-base)
-
-        $value: ($color-base, $color-invert, $color-light, $color-dark)
-
-        // We only want to merge the map if the color base is an actual color
-        @if type-of($color-base) == 'color'
-          // We merge this colors elements as map with Bulma's colors map
-          // (we can override them this way, no multiple definition for the same name)
-          // $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark)))
-          $merged-colors: map_merge($merged-colors, ($name: $value))
-
-  @return $merged-colors
-
-@function powerNumber($number, $exp)
-  $value: 1
-  @if $exp > 0
-    @for $i from 1 through $exp
-      $value: $value * $number
-  @else if $exp < 0
-    @for $i from 1 through -$exp
-      $value: $value / $number
-  @return $value
-
-@function colorLuminance($color)
-  @if type-of($color) != 'color'
-    @return 0.55
-  $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
-  @each $name, $value in $color-rgb
-    $adjusted: 0
-    $value: $value / 255
-    @if $value < 0.03928
-      $value: $value / 12.92
-    @else
-      $value: ($value + .055) / 1.055
-      $value: powerNumber($value, 2)
-    $color-rgb: map-merge($color-rgb, ($name: $value))
-  @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
-
-@function findColorInvert($color)
-  @if (colorLuminance($color) > 0.55)
-    @return rgba(#000, 0.7)
-  @else
-    @return #fff
-
-@function findLightColor($color)
-  @if type-of($color) == 'color'
-    $l: 96%
-    @if lightness($color) > 96%
-      $l: lightness($color)
-    @return change-color($color, $lightness: $l)
-  @return $background
-
-@function findDarkColor($color)
-  @if type-of($color) == 'color'
-    $base-l: 29%
-    $luminance: colorLuminance($color)
-    $luminance-delta: (0.53 - $luminance)
-    $target-l: round($base-l + ($luminance-delta * 53))
-    @return change-color($color, $lightness: max($base-l, $target-l))
-  @return $text-strong
-
-@function bulmaRgba($color, $alpha)
-  @if type-of($color) != 'color'
-    @return $color
-  @return rgba($color, $alpha)
-
-@function bulmaDarken($color, $amount)
-  @if type-of($color) != 'color'
-    @return $color
-  @return darken($color, $amount)
-
-@function bulmaLighten($color, $amount)
-  @if type-of($color) != 'color'
-    @return $color
-  @return lighten($color, $amount)

data/app/assets/stylesheets/sass/utilities/initial-variables.sass

@@ -1,78 +0,0 @@
-// Colors
-
-$black:        hsl(0, 0%, 4%) !default
-$black-bis:    hsl(0, 0%, 7%) !default
-$black-ter:    hsl(0, 0%, 14%) !default
-
-$grey-darker:  hsl(0, 0%, 21%) !default
-$grey-dark:    hsl(0, 0%, 29%) !default
-$grey:         hsl(0, 0%, 48%) !default
-$grey-light:   hsl(0, 0%, 71%) !default
-$grey-lighter: hsl(0, 0%, 86%) !default
-$grey-lightest: hsl(0, 0%, 93%) !default
-
-$white-ter:    hsl(0, 0%, 96%) !default
-$white-bis:    hsl(0, 0%, 98%) !default
-$white:        hsl(0, 0%, 100%) !default
-
-$orange:       hsl(14,  100%, 53%) !default
-$yellow:       hsl(48,  100%, 67%) !default
-$green:        hsl(141, 53%,  53%) !default
-$turquoise:    hsl(171, 100%, 41%) !default
-$cyan:         hsl(204, 71%,  53%) !default
-$blue:         hsl(217, 71%,  53%) !default
-$purple:       hsl(271, 100%, 71%) !default
-$red:          hsl(348, 86%, 61%) !default
-
-// Typography
-
-$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
-$family-monospace: monospace !default
-$render-mode: optimizeLegibility !default
-
-$size-1: 3rem !default
-$size-2: 2.5rem !default
-$size-3: 2rem !default
-$size-4: 1.5rem !default
-$size-5: 1.25rem !default
-$size-6: 1rem !default
-$size-7: 0.75rem !default
-
-$weight-light: 300 !default
-$weight-normal: 400 !default
-$weight-medium: 500 !default
-$weight-semibold: 600 !default
-$weight-bold: 700 !default
-
-// Spacing
-
-$block-spacing: 1.5rem !default
-
-// Responsiveness
-
-// The container horizontal gap, which acts as the offset for breakpoints
-$gap: 32px !default
-// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
-$tablet: 769px !default
-// 960px container + 4rem
-$desktop: 960px + (2 * $gap) !default
-// 1152px container + 4rem
-$widescreen: 1152px + (2 * $gap) !default
-$widescreen-enabled: true !default
-// 1344px container + 4rem
-$fullhd: 1344px + (2 * $gap) !default
-$fullhd-enabled: true !default
-
-// Miscellaneous
-
-$easing: ease-out !default
-$radius-small: 2px !default
-$radius: 4px !default
-$radius-large: 6px !default
-$radius-rounded: 290486px !default
-$speed: 86ms !default
-
-// Flags
-
-$variable-columns: true !default
-$rtl: false !default