kickstart_rails 3.0.55 → 3.0.56

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 9c07e2b78d6876f427c00128dc7a179edeb76623
-  data.tar.gz: 8071a1df0932e979f9ceaaf7c93759642098e470
+  metadata.gz: 49c4e49b462987a76fdcd2b4297b973ee94c289e
+  data.tar.gz: 58c4a8556c69a650ee64945cacb752b450d18aa5
 SHA512:
-  metadata.gz: 4e37ee0158e3aade60a34aa3cb2477d8159f27464af063228acf1369aa69e9b9a169682a8c6dc9c7a3505f2f307d9b391b347c534f397054ef528d371adbe292
-  data.tar.gz: e83da08329cb11d36a831daee9ac5d77b2d2f904665c5ca8b75ebac296de6e7bc7dc84210e442944d6d1b71aed1175ba8ce7a0697babfa7765757f9e5367ec96
+  metadata.gz: 62be9d7f87e7616a1af15bd5c3e5dd67929ce6d7001ffbe7ac195573a85640a084b88405d639eb0d5af29847a1eef7f26bb56df9706587a4fa31ad6b9b2ac079
+  data.tar.gz: a1b54f160fbcd741102959e074c1b57ac4f912872803b2feb4e190c1272290c630eb6301b4090ef07d6a38e1a7ffab0e89d40411ce36c05793e2788961b96977

data/app/assets/stylesheets/core/_animations.sass

@@ -0,0 +1,8 @@
+@keyframes fadeInDown 
+  0%
+    opacity: 0
+    transform: translateY(-20px)
+
+  100%
+    opacity: 1
+    transform: translateY(0)

data/app/assets/stylesheets/core/_base.sass

@@ -0,0 +1,8 @@
+*
+  box-sizing: border-box
+
+iframe
+  width: 100%
+  border: 0
+  padding: 15px
+  margin-bottom: 25px

data/app/assets/stylesheets/core/_base_components.sass

@@ -0,0 +1,15 @@
+// Base Components
+// ===============
+// These are the base components from which dependent components can extend.
+
+// Components
+@import components/_alerts
+@import components/_buttons
+@import components/_hr
+@import components/_images
+@import components/_labels
+@import components/_modals
+@import components/_progress
+@import components/_tables
+@import components/_dropdown_menu
+@import components/_navbar

data/app/assets/stylesheets/core/_dependent_components.sass

@@ -0,0 +1,12 @@
+// Dependent Components
+// ====================
+// These components extend the core and base components.
+
+// Components
+@import components/_growls
+@import components/_modals
+@import components/_notifications
+@import components/_tabs
+@import components/_tooltips
+@import components/_forms
+@import components/_pagination

data/app/assets/stylesheets/core/_direct-apply.sass

@@ -0,0 +1,337 @@
+// Direct applications
+// ===================
+// Regardless of semantic or non-semantic usage, some styles
+// Should be applied directly to classes or elements no matter
+// what. This include should be included near the end of the
+// import chain but before kickstart.sass to accomplish this.
+
+body
+  &.dismiss-modal
+    cursor: pointer
+
+// Buttons
+// -------
+
+button,
+input[type="submit"],
+input[type="button"],
+input[type="file"]::-webkit-file-upload-button
+  +button
+
++dropdown_menu
+
+// Forms
+// -----
+
+%error_message
+  font-style: italic
+  margin:
+    top: 7px
+    bottom: 14px
+
+form
+  .errors, .warnings, .successes
+    p
+      @extend %error_message
+
+  .errors
+    +field-colors(map-get($colors, red))
+
+  .warnings
+    +field-colors(map-get($colors, yellow))
+
+  .successes
+    +field-colors(map-get($colors, green))
+
+  p
+    &.error, &.warning, &.success
+      @extend %error_message
+
+  label, span, p
+    &.error
+      color: map-get($colors, red)
+
+    &.warning
+      color: map-get($colors, yellow)
+
+    &.success
+      color: map-get($colors, green)
+
+  input, select
+    &.error
+      border-color: map-get($colors, red)
+
+    &.warning
+      border-color: map-get($colors, yellow)
+
+    &.success
+      border-color: map-get($colors, green)
+
+
+// Growls
+// ------
+
+.growl_container
+  position: fixed
+  top: 0
+  right: 0
+  padding: $space/2
+  z-index: 2000
+  width: 300px
+  overflow: auto
+  max-height: 100vh
+
+  .growl
+    box-shadow: 0px 0px $space/2 rgba(0, 0, 0, 0.5)
+    transition: all 0.5s
+
+    &.show, &.hide
+      +fadeInDown
+
+    &.hide
+      animation-direction: reverse
+
+    +growl
+
+// Status
+// ------
+
+.status_bar
+  +status_bar
+    .status_bar-status
+      +label
+
+      &[data-type="status-red"]
+        background: map-get($colors, red)
+
+      &[data-type="status-orange"]
+        background: map-get($colors, orange)
+
+      &[data-type="status-yellow"]
+        background: map-get($colors, yellow)
+
+      &[data-type="status-green"]
+        background: map-get($colors, green)
+
+      &[data-type="status-blue"]
+        background: map-get($colors, blue)
+
+      &[data-type="status-violet"]
+        background: map-get($colors, violet)
+
+// Tabs
+// ----
+
+[data-panel]
+  display: none
+
+  &.open
+    display: block
+
+// Tooltips
+// --------
+
+=tooltip_base
+  margin-bottom: 0
+  position: absolute
+  display: block
+  opacity: 0
+  bottom: 100%
+  box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.25)
+  pointer-events: none
+  max-width: 350px
+  min-width: 100px
+  text-align: center
+  transition: all 0.25s
+
+=tooltip_arrow
+  border-top-style: solid
+  border-top-width: 10px
+  border-left: 10px solid transparent
+  border-right: 10px solid transparent
+  width: 0px
+  height: 0px
+  content: ' '
+  display: block
+  background: transparent
+  position: absolute
+  left: 50%
+  margin-left: -8px
+  opacity: 0
+
+=pseudo-tooltip-color($color: $primary-color)
+  &:after
+    +label($color)
+    margin-bottom: 0
+
+  &:before
+    border-top-color: $color
+
+[data-ks-tooltip]
+  position: relative
+
+  +pseudo-tooltip-color
+
+  &:after
+    content: attr(data-ks-tooltip)
+    +tooltip_base
+    transform: translateY(0px)
+    z-index: 10
+
+  &:before
+    +tooltip_arrow
+    bottom: 100%
+    z-index: 100
+
+  &:hover
+    &:after, &:before
+      opacity: 1
+
+    &:after
+      transform: translateY(-8px)
+      transition: transform 0.25s
+
+  // Positioning
+
+  &[data-ks-tooltip-position="bottom"]
+    &:after
+      top: 100%
+      bottom: auto
+      margin-top: 15px
+      transform: translateY(-6px)
+
+    &:before
+      transform: rotate(180deg)
+      top: 100%
+      bottom: auto
+
+  &[data-ks-tooltip-position="left"]
+    &:after
+      transform: translateY(6px)
+      top: 50%
+      bottom: auto
+      margin:
+        top: -19px
+        right: 12px
+      left: auto
+      right: 100%
+
+    &:before
+      transform: rotate(-90deg)
+      top: 50%
+      margin-top: -4px
+      bottom: auto
+      left: auto
+      right: 100%
+
+  &[data-ks-tooltip-position="right"]
+    &:after
+      transform: translateY(6px)
+      top: 50%
+      bottom: auto
+      margin:
+        top: -19px
+        left: 16px
+      left: 100%
+      right: auto
+
+    &:before
+      transform: rotate(90deg)
+      top: 50%
+      margin-top: -4px
+      margin-left: 4px
+      bottom: auto
+      left: 100%
+      right: auto
+
+  &[data-ks-tooltip-color="red"]
+    +pseudo-tooltip-color(map-get($colors, red))
+
+  &[data-ks-tooltip-color="orange"]
+    +pseudo-tooltip-color(map-get($colors, orange))
+
+  &[data-ks-tooltip-color="yellow"]
+    +pseudo-tooltip-color(map-get($colors, yellow))
+
+  &[data-ks-tooltip-color="green"]
+    +pseudo-tooltip-color(map-get($colors, green))
+
+  &[data-ks-tooltip-color="blue"]
+    +pseudo-tooltip-color(map-get($colors, blue))
+
+  &[data-ks-tooltip-color="violet"]
+    +pseudo-tooltip-color(map-get($colors, violet))
+
+.tooltip
+  +tooltip_base
+  left: -30px
+  right: -30px
+  transform: translateY(8px)
+  z-index: 10
+  +label(map-get($colors, blue))
+  margin: 10px auto
+
+  &:after
+    +tooltip_arrow
+    top: 100%
+
+  &.tooltip-bottom
+    top: 100%
+    bottom: auto
+
+    &:after
+      bottom: 100%
+      top: auto
+      transform: rotate(180deg)
+
+  &.tooltip-left
+    right: 100%
+    left: auto
+
+    &:after
+      transform: rotate(-90deg)
+      left: 100%
+
+  &.tooltip-right
+    left: 100%
+    right: auto
+
+    &:after
+      transform: rotate(90deg)
+      left: auto
+      right: 100%
+      margin:
+        left: 0
+        right: -8px
+
+  &.tooltip-right, &.tooltip-left
+    top: 0
+    bottom: auto
+    margin: 0
+
+    &:after
+      top: 8px
+
+  &.tooltip-red
+    background-color: map-get($colors, red)
+
+  &.tooltip-orange
+    background-color: map-get($colors, orange)
+
+  &.tooltip-yellow
+    background-color: map-get($colors, yellow)
+
+  &.tooltip-green
+    background-color: map-get($colors, green)
+
+  &.tooltip-blue
+    background-color: map-get($colors, blue)
+
+  &.tooltip-violet
+    background-color: map-get($colors, violet)
+
+  &.tooltip-primary
+    background-color: $primary-color
+
+  &.tooltip-secondary
+    background-color: $secondary-color

data/app/assets/stylesheets/core/_grid.sass

@@ -0,0 +1,148 @@
+// Still playing with this
+  $mobile: (
+    default: 360px,
+    large: 480px,
+    larger: 600px,
+    largest: 768px
+  )
+
+//
+  $display: (
+    smallest: 960px,
+    smaller: 1024px,
+    small: 1200px,
+    default: 1400px
+  )
+
+$phone: 360px
+$phablet: 480px
+$tablet: 768px
+$tablet-landscape: 960px
+$desktop: 1024px
+$large-monitor: 1200px
+$xl-monitor: 1400px
+$xxl-monitor: 1800px
+
+$grid-columns: 12
+$grid-gutter: 15px
+
+// Grid breakpoints
+// ----------------
+// Critical breakpoints where offsets and alternative grid styles will
+// be displayed
+
+$showOffsets:        $tablet-landscape // Offsets render at this breakpoint
+$showColumns:        $phablet          // Allow < 12 columns
+$showPartialColumns: $tablet           // Simpler alternative to actual columns
+$showFullColumns:    $desktop          // Actual user-defined column measurement
+
+=container-default($fluid: false)
+  margin: 0px auto
+  
+  @if $fluid == false
+    max-width: $tablet
+  padding:
+    left: $space
+    right: $space
+
+  @if $fluid == false
+    @media screen and (min-width: $showOffsets)
+      max-width: $desktop
+
+    @media screen and (min-width: $xxl-monitor)
+      max-width: $large-monitor
+
+=row
+  display: flex
+  width: 100%
+  justify-content: flex-start
+  align-items: stretch
+  flex-wrap: wrap
+  margin:
+    left: -$grid-gutter/2
+    right: -$grid-gutter/2
+
+=measure-columns($columns, $prop)
+  // TODO: DRY this somehow?
+  @if $prop == "width"
+    width: calc(#{percentage($columns/$grid-columns)} - #{$grid-gutter})
+    margin:
+      left: $grid-gutter/2
+      right: $grid-gutter/2
+
+  @else if $prop == "margin-left"
+    margin-left: calc(#{percentage($columns/$grid-columns)} + #{$grid-gutter/2})
+
+  @else if $prop == "margin-right"
+    margin-right: calc(#{percentage($columns/$grid-columns)} - #{(($grid-columns/$columns - 1) * $grid-gutter)/($grid-columns/$columns) - $grid-gutter})
+
+=set-offset($columns, $side: "margin-right")
+  // Never show leftes and rights on mobile
+  // +measure-columns(0, $side)
+
+  // Look for keywords
+  @if $columns == "half"
+    @media screen and (min-width: $showPartialColumns)
+      +measure-columns(6, $side)
+
+  @else if $columns == "third"
+    @media screen and (min-width: $showPartialColumns)
+      +measure-columns(6, $side)
+
+    @media screen and (min-width: $showFullColumns)
+      +measure-columns(4, $side)
+
+  @else if $columns == "twothirds"
+    @media screen and (min-width: $showPartialColumns)
+      +measure-columns(6, $side)
+
+    @media screen and (min-width: $showFullColumns)
+      +measure-columns(8, $side)
+
+  @else
+    @media screen and (min-width: $showPartialColumns)
+      +measure-columns($columns, $side)
+
+// Convenience mixins
+=right($columns)
+  +set-offset($columns, "margin-right")
+=left($columns)
+  +set-offset($columns, "margin-left")
+
+=set-column($columns, $left, $right)
+  +measure-columns($columns, "width")
+  clear: none
+  display: block
+  // margin-left: 0
+
+  @if $right != 0
+    +set-offset($right, "margin-right")
+
+  @if $left != 0
+    +set-offset($left, "margin-left")
+
+=column($columns: 12, $left: 0, $right: 0)
+  // Everything is a full width column on mobile by default
+  +set-column(12, 0, 0)
+
+  // Look for keywords
+  @if $columns == "half"
+    @media screen and (min-width: $showPartialColumns)
+      +set-column($grid-columns/2, $left, $right)
+
+  @else if $columns == "third"
+    @media screen and (min-width: $showPartialColumns)
+      +set-column($grid-columns/2, $left, $right)
+    @media screen and (min-width: $showFullColumns)
+      +set-column($grid-columns/3, $left, $right)
+
+  @else if $columns == "twothirds"
+    @media screen and (min-width: $showPartialColumns)
+      +set-column($grid-columns/2, $left, $right)
+    @media screen and (min-width: $showFullColumns)
+      +set-column(($grid-columns * 2/3), $left, $right)
+
+  @else
+    // No keywords found, pass in values.
+    @media screen and (min-width: $showColumns)
+      +set-column($columns, $left, $right)