kickstart_rails 3.0.16 → 3.0.17

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

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

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

@@ -5,6 +5,10 @@
 // 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
 // -------
 
@@ -18,6 +22,54 @@ input[type="file"]::-webkit-file-upload-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
 // ------
 
@@ -26,7 +78,7 @@ input[type="file"]::-webkit-file-upload-button
   top: 0
   right: 0
   padding: $space/2
-  z-index: 1000
+  z-index: 2000
   width: 300px
   overflow: auto
   max-height: 100vh
@@ -67,6 +119,15 @@ input[type="file"]::-webkit-file-upload-button
       &[data-type="status-violet"]
         +label(map-get($colors, violet))
 
+// Tabs
+// ----
+
+[data-panel]
+  display: none
+
+  &.open
+    display: block
+
 // Tooltips
 // --------
 

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

@@ -107,7 +107,7 @@ $showFullColumns:    $desktop          // Actual user-defined column measurement
   +measure-columns($columns, "width")
   clear: none
   display: block
-  margin-left: 0
+  // margin-left: 0
 
   @if $right != 0
     +set-offset($right, "margin-right")

data/app/assets/stylesheets/kickstart_rails/core/_mixins.sass

@@ -16,7 +16,6 @@
 
 =fadeInDown
   animation-duration: 0.25s
-  animation-delay: 0.2s
   animation-timing-function: ease
   animation-fill-mode: both
   animation-name: fadeInDown

data/app/assets/stylesheets/kickstart_rails/core/_typography.sass

@@ -154,17 +154,27 @@ a
     bottom: 0.5rem
   +heading-break
 
-=list-default
+=list-default($style: 'none')
   margin-bottom: $space
 
-=list-unstyled-default
+  @if ($style == 'unstyled')
+    +list-unstyled
+
+  @if ($style == 'horizontal')
+    +list-horizontal
+
+  @if ($style == 'unstyled horizontal')
+    +list-unstyled
+    +list-horizontal
+
+=list-unstyled
   padding: 0
   list-style: none
 
   > li
     margin-bottom: 0.85rem
 
-=list-horizontal-default
+=list-horizontal
   > li
     display: inline-block
     margin-right: 5px

data/app/assets/stylesheets/kickstart_rails/docs.sass

@@ -1,258 +1,52 @@
-/*
- *  Docs
- *  ====
- *  Generation of css for the getkickstart.com homepage.
- */
+// Docs
+// ====
+// Generation of css for the getkickstart.com homepage.
+// Page-level styling goes elsewhere.
 
 // Choose your theme
-@import themes/_default
+@import themes/_canary
 
-// Now write your own Sass
+// Basic layout
+// ------------
 
-html, body
-  overflow-x: hidden
+.wrapper
+  +container
 
-.mainpane
-  +column('twothirds')
+#above-footer
+  +above-footer
+  position: relative
 
-.sidebar
-  +column('third')
+#screen
+  +screen
 
-  section
-    margin-bottom: $space
-
-  h1
-    +heading-xs
-
-  h2
-    +heading-xxs
-
-.fullpane
-  +column(12)
-
-  @media screen and (min-width: $tablet-landscape)
-    +column(8, 2, 2)
+// Navigation
+// ----------
 
 .main-navigation
-  +navbar($layout: 'fluid-fixed', $collapse: true)
+  +navbar($collapse: true, $layout: 'fluid', $background-color: map-get($brown, darkest))
 
-  .logo
+  svg
     height: 30px
-    margin:
-      bottom: -5px
-    opacity: 0.8
-
-.docs-nav
-  +navbar($layout: 'fluid-fixed', $background: darken(map-get($colors, blue), 5%), $collapse: true)
-  margin:
-    top: -$space
-
-// Colors
-// Kind of shitty, but there is a colors page that directly relies on this.
-
-// TODO: Use map functions to get colors and make this a loop
-// http://sass-lang.com/documentation/Sass/Script/Functions.html
-
-.color-
-  &black
-    background-color: black
-
-  &light-black
-    background-color: map-get($black, light)
-
-  &lighter-black
-    background-color: map-get($black, lighter)
-
-  &lightest-black
-    background-color: map-get($black, lightest)
-
-  &gray
-    background-color: gray
-
-  &white
-    background-color: white
-
-  &yellow
-    background-color: map-get($colors, yellow)
-
-.col-example
-  +root-element
-  padding: $space/2
-  background: map-get($white, dark)
-  margin: $space/2 0
-  text-align: center
-
-  .gray
-    background: map-get($white, darker)
-
-.example
-  +root-element
-  padding: $space
-  margin-bottom: $space
-  border-color: map-get($white, darkest)
-
-  > *:last-child
-    margin-bottom: 0
-
-// Also shitty
-
-h1.example-
-  &xxl
-    +heading-xxl
-  &xl
-    +heading-xl
-  &lg
-    +heading-lg
-  &md
-    +heading-md
-  &rg
-    +heading-rg
-  &sm
-    +heading-sm
-  &xs
-    +heading-xs
-  &xxs
-    +heading-xs
-
-.if-jquery, .ifnot-jquery, .if-semantic, .ifnot-semantic
-  display: none
-
-.hero
-  margin:
-    top: -$space
-
-  ul, ul li, .navbar
-    text-align: left
-
-  .button-group
-    color: $default-font-color
-
-  .logo
-    width: 600px
-    max-width: 95%
-
-  form, table, .tile
-    text-align: left
-    max-width: 360px
-    margin: 0px auto
-    color: map-get($black, light)
-
-  .tile
-    h1
-      color: map-get($black, light)
-      font-size: 1.1rem
+    fill: white
 
-// Images
-
-.logo
-  max-width: 600px
-
-img
-  max-width: 100%
-
-// Iframes
-iframe.animation
-  max-width: 500px
-  height: 200px
-  display: block
-  margin:
-    left: auto
-    right: auto
-    bottom: $space
-  overflow: hidden
-
-// Grid
-
-.example-column
-  background-color: map-get($white, darkest)
-  color: white
-
-// Modal
-
-.modal.example
-  display: block
-  position: static
-  box-shadow: none
-  margin: 0px auto
-  left: auto
-  top: auto
-  box-shadow: 0px 0px 5px #AAA
-
-// Root Element
-.root-element
-  +root-element
+// Footer
+// ------
 
 footer.main
-  margin-top: $space * 4
-  background-color: $primary-color
-  padding:
-    top: $space
-    bottom: $space
+  background: map-get($brown, light)
+  padding: $space 0
+  color: white
 
-  p
-    margin: 0
+  a
     color: white
+    text-decoration: underline
 
-    a
-      color: white
-      text-decoration: underline
-
-.test-a
-  +column('third', 'third', 'third')
-
-.show-mobile
-  display: inherit
-
-  @media screen and (min-width: $tablet)
-    display: none
-
-.show-tablet
-  display: none
-
-  @media screen and (min-width: $tablet)
-    display: inherit
-
-// Tables
-table
-  +table
-
-// HOME PAGE
-.first-pitch, .second-pitch, .third-pitch
-  +row
-
-.first-pitch
-  padding: 
-    top: $space * 2
-    bottom: $space * 2
-
-  p
-    +p(true)
-
-  .feature
-    +column('half')
-
-  h1
-    +heading-md
-    text-align: center
-
-.second-pitch
-  padding:
-    top: $space * 3
-    bottom: $space * 3
-
-  .feature
-    +column('third')
-
-  h1
-    +heading-rg
-
-.third-pitch
-  .feature
-    @media screen and (min-width: $tablet)
-      +column(6)
-
-    @media screen and (min-width: $desktop)
-      +column(3)
+// Components
+// ----------
 
-  h1
-    +heading-xs
+// Buttons
+.button
+  +button
+  
+  &.button-primary
+    +button-color($primary-color)

data/app/assets/stylesheets/kickstart_rails/kickstart.sass

@@ -168,36 +168,35 @@
 .col-twothirds
   +column('twothirds')
 
-[class^="col"]
-  // Left offsets
-  @each $screen in '', 'xs-', 'sm-', 'rg-', 'md-', 'lg-', 'xl-'
-    &.col-left-#{$screen}third
-      +left('third')
+// Left offsets
+@each $screen in '', 'xs-', 'sm-', 'rg-', 'md-', 'lg-', 'xl-'
+  .col-left-#{$screen}third
+    +left('third')
 
-    &.col-left-#{$screen}twothirds
-      +left('twothirds')
+  .col-left-#{$screen}twothirds
+    +left('twothirds')
 
-    &.col-left-#{$screen}half
-      +left('half')
+  .col-left-#{$screen}half
+    +left('half')
 
-    @for $i from 1 through 12
-      &.col-left-#{$screen}#{$i}
-        +left($i)
+  @for $i from 1 through 12
+    .col-left-#{$screen}#{$i}
+      +left($i)
 
-  // Right offsets
-  @each $screen in '', 'xs-', 'sm-', 'rg-', 'md-', 'lg-', 'xl-'
-    &.col-right-#{$screen}third
-      +right('third')
+// Right offsets
+@each $screen in '', 'xs-', 'sm-', 'rg-', 'md-', 'lg-', 'xl-'
+  .col-right-#{$screen}third
+    +right('third')
 
-    &.col-right-#{$screen}twothirds
-      +right('twothirds')
+  .col-right-#{$screen}twothirds
+    +right('twothirds')
 
-    &.col-right-#{$screen}half
-      +right('half')
+  .col-right-#{$screen}half
+    +right('half')
 
-    @for $i from 1 through 12
-      &.col-right-#{$screen}#{$i}
-        +right($i)
+  @for $i from 1 through 12
+    .col-right-#{$screen}#{$i}
+      +right($i)
 
 // IMAGES
 // ------
@@ -250,6 +249,9 @@
 .navbar
   +navbar
 
+  &.navbar-dark
+    +navbar-color($background-color: map-get($black, lighter))
+
   &.navbar-collapse
     +navbar($collapse: true)
 
@@ -259,8 +261,8 @@
   &.navbar-fluid_fixed
     +navbar-fluid_fixed
 
-  &.navbar-dark
-    +navbar($background: map-get($black, lighter))
+  &.navbar-fixed
+    +navbar-fixed
 
 .pagination
   +pagination
@@ -279,6 +281,14 @@
   &.table-hover
     +table-hover
 
+// TABS
+// ----
+.tabs
+  +tabs
+
+.tab_pane_container
+  +tab_pane_container
+
 // TOOLTIPS
 // --------