kickstart_rails 3.0.16 → 3.0.17

data/app/assets/stylesheets/kickstart_rails/components/_buttons.sass

@@ -13,7 +13,7 @@
     pointer-events: none
     // TODO: Cursor disabled?
 
-  &.with-submenu
+  &.menu-item
     position: relative
 
     ul
@@ -72,7 +72,7 @@
     left: $size * $size * map-get($rootElement, paddingH)
     right: $size * $size * map-get($rootElement, paddingH)
 
-  &.with-submenu
+  &.menu-item
     &:after
       font-size: $size * 0.85rem
       margin-left: $size * $size * $space/4

data/app/assets/stylesheets/kickstart_rails/components/_dropdown_menu.sass

@@ -1,5 +1,5 @@
 =dropdown_menu-default
-  .with-submenu
+  .menu-item
     ul
       display: none
       position: absolute

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

@@ -3,51 +3,13 @@ label, legend
   font-weight: 500
   margin-bottom: $space/4
 
-%error_message
-  font-style: italic
-  margin:
-    top: 7px
-    bottom: 14px
-
-=form-default
+=form-default($layout: 'none')
   margin-bottom: $space
 
-  .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)
+  @if ($layout == 'horizontal')
+    +form-horizontal
+  @if ($layout == 'left')
+    +form-left
 
   @content
 
@@ -58,6 +20,7 @@ label, legend
   border: 1px solid #CCC
   display: block
   border-radius: 3px
+  max-width: 100%
 
   label + &
     margin-top: ($space/5)
@@ -88,38 +51,43 @@ select
   height: calc(#{$default-line-height} + #{2 * map-get($rootElement, paddingV)})
   background-image: none
 
-=form-horizontal-default
+=form-horizontal
+  display: inline-block
+
   label, input
     display: inline-block
 
   @content
 
-=form-left-default()
+=form-left
   label
+    +root-element
+    padding:
+      right: 0
+      left: 0
     display: inline-block
-    width: 50%
-    text-align: right
-    padding-right: 10px
-    margin: 0
-    + input[type="text"]
-      width: 50%
-      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($orientation)
+=form_group-default($layout)
   display: block
   margin-bottom: $space
 
-  @if $orientation == 'horizontal'
-    display: inline-block
+  @if $layout == 'horizontal'
+    display: inherit
     margin:
-      bottom: 0
       right: $space/5
 
     > *
       display: inline-block
-      margin-right: $space/5
+      margin-right: $space/5 
 
   @content
 

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

@@ -1,4 +1,4 @@
-=label-default($background-color: map-get($colors, blue))
+=label-default($background-color: $primary-color)
   +root-element
   background: $background-color
   font-size: 0.8rem

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

@@ -1,20 +1,21 @@
 =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: 1vh
-  width: 98%
+  top: 5vh
   left: 2%
+  right: 2%
   margin: 0px auto
   display: none
   background: white
   border-color: map-get($white, dark)
-  animation-duration: 0.25s
-  animation-delay: 0.2s
+  animation-duration: 0.2s
   animation-timing-function: ease
   animation-fill-mode: both
-  z-index: 1000
+  z-index: 1500
 
   &[style="display: block;"]
     animation-name: fadeInDown
@@ -26,4 +27,47 @@
     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/components/_nav.sass

@@ -67,7 +67,7 @@
 
       &:last-child
         @media screen and (min-width: $breakpoint)
-          > li.with-submenu.open
+          > li.menu-item.open
             ul
               left: auto
               right: -1px
@@ -120,7 +120,7 @@
             @media screen and (min-width: $breakpoint)
               display: none
 
-        &.with-submenu // Added via k$.nav()
+        &.menu-item // Added via k$.nav()
           padding: (2 * map-get($rootElement, paddingV) - 1) (map-get($rootElement, paddingH))
           +color($background)
           cursor: pointer

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

@@ -25,9 +25,27 @@
     +container(false)
     +navbar-align_menus($breakpoint)
 
-=navbar-default($layout: 'none', $background: map-get($white, dark), $breakpoint: $tablet, $collapse: false)
-  background: $background
-  box-shadow: 0px 1px 0px darken($background, 12%) inset
+=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
 
@@ -36,14 +54,14 @@
     border-radius: 0
     position: relative
 
-    @if (lightness($background) < 75%)
+    @if (lightness($background-color) < 75%)
       color: white
     @else
       color: $default-font-color
 
     @media screen and (min-width: $breakpoint)
       display: flex
-      align-items: flex-start
+      align-items: center
       flex-wrap: wrap
       justify-content: space-between
       align-content: space-between
@@ -75,14 +93,14 @@
 
       &:last-child
         @media screen and (min-width: $breakpoint)
-          > li.with-submenu.open
+          > li.menu-item.open
             ul
               left: auto
               right: -1px
 
       &:only-child
         @media screen and (min-width: $breakpoint)
-          > li.with-submenu.open
+          > li.menu-item.open
             ul
               left: -1px
               right: auto
@@ -113,6 +131,12 @@
           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
@@ -125,6 +149,8 @@
               left: 0
               right: 0
             opacity: 0.5
+            @if ($collapse == false)
+              display: none
 
             &:hover, &:active
               box-shadow: none
@@ -135,9 +161,8 @@
             @media screen and (min-width: $breakpoint)
               display: none
 
-        &.with-submenu // Added via k$.nav()
+        &.menu-item // Added via k$.nav()
           padding: (2 * map-get($rootElement, paddingV) - 1) (map-get($rootElement, paddingH))
-          +color($background)
           cursor: pointer
 
           &:before
@@ -160,16 +185,16 @@
               margin-left: 8px
 
           &:hover
-            @if (lightness($background) < 75%)
+            @if (lightness($background-color) < 75%)
               color: white
             @else
               color: rgba(0, 0, 0, 0.85)
-            background: darken($background, 5%)
-            border-color: darken($background, 5%)
+            background: darken($background-color, 5%)
+            border-color: darken($background-color, 5%)
 
           &:active
-            background: darken($background, 15%)
-            border-color: darken($background, 15%)
+            background: darken($background-color, 15%)
+            border-color: darken($background-color, 15%)
 
           &.open
             color: rgba(0, 0, 0, 0.85)
@@ -205,7 +230,6 @@
           display: inherit
 
         > a:not([role=button])
-          +color($background)
           text-decoration: none
           cursor: pointer
           display: block
@@ -220,21 +244,26 @@
             right: map-get($rootElement, paddingH)
 
           &:hover
-            @if (lightness($background) < 75%)
+            @if (lightness($background-color) < 75%)
               color: white
             @else
               color: rgba(0, 0, 0, 0.85)
-            background: darken($background, 5%)
-            border-color: darken($background, 5%)
+            background: darken($background-color, 5%)
+            border-color: darken($background-color, 5%)
 
           &:active
-            background: darken($background, 15%)
-            border-color: darken($background, 15%)
+            background: darken($background-color, 15%)
+            border-color: darken($background-color, 15%)
 
-  @if $layout == 'fluid'
+  @if ($layout == 'fluid')
     +navbar-fluid($breakpoint)
 
-  @if $layout == 'fluid-fixed'
+  @if ($layout == 'fluid-fixed')
     +navbar-fluid_fixed($breakpoint)
 
+  @if ($fixed == true)
+    +navbar-fixed
+
+  +navbar-color($background-color)
+
   @content

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

@@ -3,7 +3,7 @@
   top: 0
   left: 0
   right: 0
-  z-index: 1100 // Above modal
+  z-index: 2000 // Above modal
   display: flex
   pointer-events: none
 

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