kickstart_rails 3.0.39 → 3.0.40

data/app/assets/stylesheets/core/components/_forms.sass

@@ -0,0 +1,106 @@
+label, legend
+  display: block
+  font-weight: 500
+  margin-bottom: $space/4
+
+=form-default($layout: 'none')
+  margin-bottom: $space
+
+  @if ($layout == 'horizontal')
+    +form-horizontal
+  @if ($layout == 'left')
+    +form-left
+
+  @content
+
+=input-styles
+  +root-element
+  margin: 0
+    bottom: 0
+  border: 1px solid #CCC
+  display: block
+  border-radius: 3px
+  max-width: 100%
+
+  label + &
+    margin-top: ($space/5)
+
+  &:focus
+    outline: 0px
+    box-shadow: 0px 0px 0px 2px $primary-color
+
+  @content
+
++text-inputs
+  +input-styles
+
+textarea
+  +input-styles
+  width: 300px
+
+input[type="checkbox"],
+input[type="radio"]
+  display: inline-block
+  width: 14px
+  margin:
+    left: 1px
+    right: 5px
+
+select
+  +button
+  height: calc(#{$default-line-height} + #{2 * map-get($rootElement, paddingV)})
+  background-image: none
+
+=form-horizontal
+  display: inline-block
+
+  label, input
+    display: inline-block
+
+  @content
+
+=form-left
+  label
+    +root-element
+    padding:
+      right: 0
+      left: 0
+    display: inline-block
+    margin: 
+      top: 0
+      bottom: 0
+
+  @media screen and (min-width: $tablet)
+    label:not(.checkbox):not(.radio)
+      text-align: right
+
+  @content
+
+=form_group-default($layout: 'none')
+  display: block
+  margin-bottom: $space
+
+  @if $layout == 'horizontal'
+    display: inherit
+    margin:
+      right: $space/5
+
+    > *
+      display: inline-block
+      margin-right: $space/5 
+
+  @content
+
+=field-colors($color)
+  label, p
+    color: $color
+
+  +text-inputs
+    border-color: $color
+
+  select
+    border-color: $color
+    background-color: $color
+
+  textarea
+    border-color: $color

data/app/assets/stylesheets/core/components/_growls.sass

@@ -0,0 +1,2 @@
+=growl-default
+  @content

data/app/assets/stylesheets/core/components/_hr.sass

@@ -0,0 +1,5 @@
+=hr-default
+  border: 0
+    top: 2px solid $default-font-color
+
+  @content

data/app/assets/stylesheets/core/components/_images.sass

@@ -0,0 +1,40 @@
+=thumbnail-content-default
+  display: flex
+  overflow: hidden
+  margin-bottom: $space
+  align-items: flex-start
+
+  img, figure
+    flex-grow: 0
+    flex-shrink: 0
+
+  > :not(img)
+    + img, + figure
+      margin-left: $space/2
+
+  h1
+    +heading-xs
+
+  > img, > figure
+    + :not(img)
+      margin-left: $space/2
+
+  @content
+
+=thumbnail-default
+  +root-element
+  border: 1px solid map-get($white, darker)
+  display: inline-block
+  max-width: 100%
+
+  img
+    max-width: 100%
+
+  figcaption
+    font-size: 0.85rem
+
+  @content
+
+figure
+  margin: 0
+  padding: 0

data/app/assets/stylesheets/core/components/_labels.sass

@@ -0,0 +1,15 @@
+=label-default($background-color: $primary-color)
+  +root-element
+  background: $background-color
+  font-size: 0.8rem
+  color: white
+  line-height: normal
+  font-weight: bold
+
+  @if $background-color == map-get($colors, yellow)
+    color: $default-font-color
+
+  &:after
+    border-top-color: $background-color
+
+  @content

data/app/assets/stylesheets/core/components/_modals.sass

@@ -0,0 +1,73 @@
+=modal-default()
+  +root-element
+  border-width: 0
+  padding: $space
+  position: fixed
+  box-shadow: 0px 0px 99999px 99999px rgba(0, 0, 0, 0.35), 0px 0px 25px rgba(0, 0, 0, 0.5)
+  top: 15px
+  top: 5vh
+  left: 2%
+  right: 2%
+  margin: 0px auto
+  display: none
+  background: white
+  border-color: map-get($white, dark)
+  animation-duration: 0.2s
+  animation-timing-function: ease
+  animation-fill-mode: both
+  z-index: 1500
+
+  &[style="display: block;"]
+    animation-name: fadeInDown
+
+  @media screen and (min-width: $tablet)
+    top: 75px
+    top: 10vh
+    width: 650px
+    left: 50%
+    margin-left: -325px
+
+  > header, > footer
+    +alert
+
+    > h1, > h2, > h3, > h4, > h5, > h6
+      margin-bottom: 0
+
+    background: map-get($white, dark)
+    color: $default-font-color
+    margin: -$space
+      bottom: $space
+
+  > header
+    border-bottom-left-radius: 0
+    border-bottom-right-radius: 0
+    position: relative
+
+    a[data-modal-close]
+      position: absolute
+      top: $space/2
+      right: $space/2
+      line-height: 1.3rem
+      text-decoration: none
+      font-size: 1.3rem
+
+  > footer
+    margin:
+      top: $space
+      bottom: -$space
+    border-top-left-radius: 0
+    border-top-right-radius: 0
+
+    ul
+      +list($style: 'unstyled horizontal')
+      text-align: right
+
+      li
+        margin:
+          bottom: 0
+          right: 0
+
+    [role="button"]
+      text-decoration: none
+
+  @content

data/app/assets/stylesheets/core/components/_navbar.sass

@@ -0,0 +1,270 @@
+=color($background)
+  @if (lightness($background) < 75%)
+    color: rgba(255, 255, 255, 0.5)
+  @else
+    color: rgba(0, 0, 0, 0.5)
+
+=navbar-align_menus($breakpoint)
+  @media screen and (min-width: $breakpoint)
+    > ul:first-child
+      margin-left: (-1 * map-get($rootElement, paddingH))
+
+    > ul:last-child
+      margin-right: (-1 * map-get($rootElement, paddingH))
+
+    > ul:only-child
+      margin-right: 0
+
+=navbar-fluid($breakpoint: $tablet)
+  nav
+    +container(true)
+    +navbar-align_menus($breakpoint)
+
+=navbar-fluid_fixed($breakpoint: $tablet)
+  nav
+    +container(false)
+    +navbar-align_menus($breakpoint)
+
+=navbar-fixed
+  position: fixed
+  z-index: 100
+  left: 0
+  right: 0
+  top: 0
+
+=navbar-color($background-color)
+  background-color: $background-color
+
+  nav
+    > ul
+      > li
+        &.menu-item
+          +color($background-color)
+
+        > a:not([role=button])
+          +color($background-color)
+
+=navbar-default($layout: 'none', $background-color: map-get($white, dark), $breakpoint: $tablet, $collapse: false, $fixed: false)
+  box-shadow: 0px 1px 0px darken($background-color, 12%) inset
+  font-size: $default-font-size
+  margin-bottom: $space
+
+  nav
+    width: 100%
+    border-radius: 0
+    position: relative
+
+    @if (lightness($background-color) < 75%)
+      color: white
+    @else
+      color: $default-font-color
+
+    @media screen and (min-width: $breakpoint)
+      display: flex
+      align-items: center
+      flex-wrap: wrap
+      justify-content: space-between
+      align-content: space-between
+
+
+    &.expand
+      @if $collapse == true
+        > ul > li
+          display: block
+
+    h1
+      +heading-xxs
+      margin-bottom: 0
+      font-size: $base-font-size
+      line-height: $default-line-height
+
+    p
+      margin: 0
+
+    > ul
+      margin: 0
+      padding: 0
+
+      @media screen and (min-width: $breakpoint)
+        display: flex
+        justify-content: space-between
+        align-content: space-between
+        align-items: center
+        flex-wrap: wrap
+
+      &:last-child
+        @media screen and (min-width: $breakpoint)
+          > li.menu-item.open
+            ul
+              left: auto
+              right: -1px
+
+      &:only-child
+        @media screen and (min-width: $breakpoint)
+          > li.menu-item.open
+            ul
+              left: -1px
+              right: auto
+
+      > li
+        list-style: none
+        +root-element
+        margin-bottom: 0
+        border-radius: 0
+        padding: (map-get($rootElement, paddingV) - 1) (map-get($rootElement, paddingH))
+        position: relative
+        margin:
+          left: (-1 * map-get($rootElement, paddingH))
+          right: (-1 * map-get($rootElement, paddingH))
+        user-select: none
+
+        @media screen and (min-width: $breakpoint)
+          margin: 0
+
+        @if $collapse == true
+          display: none
+
+          @media screen and (min-width: $breakpoint)
+            display: block
+
+        &.navbar-title
+          display: flex
+          justify-content: space-between
+          align-items: center
+
+          @media screen and (min-width: $breakpoint)
+            padding: 0 
+
+            > h1, > h2, > h3, > h4, > h5, > h6
+              padding: (map-get($rootElement, paddingV) - 1) (map-get($rootElement, paddingH))
+
+          button
+            +button-default(transparent)
+            background: transparent
+            border-color: transparent
+            color: inherit
+            display: block
+            margin-bottom: 0
+            font-family: Kickstart, 'Kickstart'
+            padding:
+              left: 0
+              right: 0
+            opacity: 0.5
+            @if ($collapse == false)
+              display: none
+
+            &:hover, &:active
+              box-shadow: none
+
+            &:hover
+              opacity: 1
+
+            @media screen and (min-width: $breakpoint)
+              display: none
+
+        &.menu-item // Added via k$.nav()
+          padding: (2 * map-get($rootElement, paddingV) - 1) (map-get($rootElement, paddingH))
+          cursor: pointer
+
+          &:before
+            content: '='
+            margin-right: 8px
+
+          &:before, &:after
+            font-family: 'Kickstart', Kickstart
+            display: inline-block
+            font-size: 0.65rem
+            vertical-align: middle
+
+          @media screen and (min-width: $breakpoint)
+            &:before
+              content: ''
+              display: none
+
+            &:after
+              content: '+'
+              margin-left: 8px
+
+          &:hover
+            @if (lightness($background-color) < 75%)
+              color: white
+            @else
+              color: rgba(0, 0, 0, 0.85)
+            background: darken($background-color, 5%)
+            border-color: darken($background-color, 5%)
+
+          &:active
+            background: darken($background-color, 15%)
+            border-color: darken($background-color, 15%)
+
+          &.open
+            color: rgba(0, 0, 0, 0.85)
+            background: white
+            border-color: map-get($white, darker)
+            border-bottom-color: transparent
+
+            &:hover
+              color: rgba(0, 0, 0, 0.85)
+              border-color: map-get($white, darker)
+              border-bottom-color: transparent
+
+          @media screen and (max-width: $breakpoint)
+            ul
+              max-width: none
+              right: -1px
+
+              li, li a:not([role=button])
+                font-size: 1rem
+
+              a:not([role=button])
+                padding:
+                  top: 2 * map-get($rootElement, paddingV)
+                  bottom: 2 * map-get($rootElement, paddingV)
+
+        ul
+          border-top-left-radius: 0
+          border-top-right-radius: 0
+          box-shadow: 3px 3px 3px -3px rgba(0, 0, 0, 0.25)
+          display: none
+
+        ul[role=button]
+          display: inherit
+
+        > a:not([role=button])
+          text-decoration: none
+          cursor: pointer
+          display: block
+          +root-element
+          margin-bottom: 0
+          border-radius: 0
+          margin: (-1 * map-get($rootElement, paddingV)) (-1 * map-get($rootElement, paddingH))
+          padding:
+            top: (2 * map-get($rootElement, paddingV))
+            bottom: (2 * map-get($rootElement, paddingV))
+            left: map-get($rootElement, paddingH)
+            right: map-get($rootElement, paddingH)
+
+          &:hover
+            @if (lightness($background-color) < 75%)
+              color: white
+            @else
+              color: rgba(0, 0, 0, 0.85)
+            background: darken($background-color, 5%)
+            border-color: darken($background-color, 5%)
+
+          &:active
+            background: darken($background-color, 15%)
+            border-color: darken($background-color, 15%)
+
+  @if ($layout == 'fluid')
+    +navbar-fluid($breakpoint)
+
+  @if ($layout == 'fluid-fixed')
+    +navbar-fluid_fixed($breakpoint)
+
+  @if ($fixed == true)
+    +navbar-fixed
+
+  +navbar-color($background-color)
+
+  @content