kickstart_rails 3.0.20 → 3.0.21

data/app/assets/stylesheets/kickstart_rails/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/kickstart_rails/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/kickstart_rails/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

data/app/assets/stylesheets/kickstart_rails/core/components/_notifications.sass

@@ -0,0 +1,20 @@
+=status_bar
+  position: fixed
+  top: 0
+  left: 0
+  right: 0
+  z-index: 2000 // Above modal
+  display: flex
+  pointer-events: none
+
+  .status_bar-status
+    +label(map-get($colors, yellow))
+    color: black
+    text-align: center
+    margin: 5px auto
+    max-width: 300px
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15)
+    +fadeInDown
+    z-index: 1000
+
+  @content

data/app/assets/stylesheets/kickstart_rails/core/components/_pagination.sass

@@ -0,0 +1,11 @@
+=pagination-default($background: map-get($white, dark))
+  display: flex
+  align-items: flex-start
+  flex-wrap: wrap
+  justify-content: space-between
+  align-content: space-between
+
+  > ul
+    +button-group-default($background-color: map-get($white, dark), $size: 1)
+
+  @content

data/app/assets/stylesheets/kickstart_rails/core/components/_progress.sass

@@ -0,0 +1,12 @@
+progress
+  width: 100%
+
+  &::-webkit-progress-bar
+    border-radius: ($space/5)
+    min-height: $space
+    -webkit-appearance: none
+    appearance: none
+    -moz-appearance: none
+
+  &::-webkit-progress-value
+    border-radius: ($space/5) 0 0 ($space/5)

data/app/assets/stylesheets/kickstart_rails/core/components/_tables.sass

@@ -0,0 +1,70 @@
+=table-default($blank: false, $zebra: false, $hover: false)
+  border-collapse: collapse
+  background: white
+  border-spacing: 0
+  empty-cells: show
+  border: 1px solid map-get($gray, light)
+  width: 100%
+  margin-bottom: $space
+
+  pre
+    margin: 0
+
+  thead
+    background: map-get($white, dark)
+    color: black
+    text-align: left
+    vertical-align: bottom
+    border-bottom: 1px solid transparent
+
+    th
+      font-weight: bold
+      text-align: left
+
+  th, td
+    background-color: transparent
+    border-left: 1px solid map-get($gray, light)
+    border-width: 0 0 0 1px
+    font-size: inherit
+    margin: 0
+    overflow: visible
+    padding: ($space/6) ($space/4)
+    line-height: normal
+
+    &:first-child
+      border-left-width: 0
+
+  @if $blank == true
+    +table-blank
+
+  @if $zebra == true
+    +table-zebra
+
+  @content
+
+=table-blank
+  border-color: transparent
+  table, tr, td, tbody, thead, th, tfoot
+    border-color: transparent
+    background: transparent
+  th, td
+    padding:
+      left: 0px
+      right: 0px
+
+=table-hover
+  tbody, thead
+    tr:hover
+      background-color: $primary-color
+
+      td, th
+        color: white
+
+=table-zebra
+  tbody, thead
+    tr:nth-child(even)
+      background-color: map-get($white, dark)
+
+    tr
+      td, th
+        padding: ($space/6) ($space/4)