kickstart_rails 3.0.55 → 3.0.56

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

@@ -0,0 +1,283 @@
+=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-collapse($breakpoint: $tablet)
+  nav 
+    &.expand
+      > ul > li
+        display: block
+
+        &.navbar-title
+          display: flex
+
+    > ul
+      > li
+        display: none
+
+        @media screen and (min-width: $breakpoint)
+          display: block
+
+        &.navbar-title
+          button
+            display: block 
+
+            @media screen and (min-width: $breakpoint)
+              display: none
+
+=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)
+
+          &: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%)
+
+
+=navbar-default($layout: 'none', $background-color: map-get($white, darker), $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
+
+    h1
+      +heading-xxs
+      margin-bottom: 0
+      font-size: $default-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
+
+        &.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
+            margin-bottom: 0
+            font-family: Kickstart, 'Kickstart'
+            padding:
+              left: 0
+              right: 0
+            opacity: 0.5
+            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)
+
+  @if ($layout == 'fluid')
+    +navbar-fluid($breakpoint)
+
+  @if ($layout == 'fluid-fixed')
+    +navbar-fluid_fixed($breakpoint)
+
+  @if ($fixed == true)
+    +navbar-fixed
+
+  @if ($collapse == true)
+    +navbar-collapse($breakpoint)
+
+  +navbar-color($background-color)
+
+  @content

data/app/assets/stylesheets/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/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($size: 1)
+
+  @content

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

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

@@ -0,0 +1,37 @@
+=tabs-default
+  +list($style: 'unstyled horizontal')
+  border-bottom: 1px solid map-get($white, darker)
+
+  li
+    margin: 0
+      right: -1px
+      bottom: -1px
+
+    &.open
+      a
+        border-bottom-color: transparent
+        background: white
+
+        &:hover, &.active
+          box-shadow: none
+
+    a
+      +button
+      border: 1px solid $secondary-color
+      padding:
+        left: map-get($rootElement, paddingH)
+        right: map-get($rootElement, paddingH)
+      border-bottom-left-radius: 0
+      border-bottom-right-radius: 0
+
+=tab_pane_container-default
+  +root-element
+  background: white
+  border-color: $secondary-color
+  border-top: 0
+  border-top-left-radius: 0
+  border-top-right-radius: 0
+  padding: $space
+  margin-top: -$space
+
+  @content

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

@@ -0,0 +1,26 @@
+=tooltip_trigger-default($background-color: false)
+  position: relative
+  display: inline-block
+  cursor: pointer
+
+  @if not $background-color == false
+    .tooltip
+      +label($background-color)
+
+  &:hover
+    [data-ks-tooltip]
+      &:after, &:before
+        opacity: 1
+
+      &:after
+        transform: translateY(-8px)
+        transition: transform 0.25s
+
+    .tooltip
+      opacity: 1
+      transform: translateY(0px)
+
+      &:after
+        opacity: 1
+
+  @content