kickstart_rails 3.0.17 → 3.0.18

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

@@ -14,6 +14,7 @@
 
   h1
     +heading-xs
+    color: inherit
 
   a:not([role=button])
     color: inherit

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

@@ -25,6 +25,10 @@
   +root-element
   border: 1px solid map-get($white, darker)
   display: inline-block
+  max-width: 100%
+
+  img
+    max-width: 100%
 
   figcaption
     font-size: 0.85rem

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

@@ -73,6 +73,7 @@
           display: block
 
     h1
+      +heading-xxs
       margin-bottom: 0
       font-size: $base-font-size
       line-height: $default-line-height

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

@@ -55,7 +55,10 @@
 =table-hover
   tbody, thead
     tr:hover
-      background-color: map-get($white, darker)
+      background-color: $primary-color
+
+      td, th
+        color: white
 
 =table-zebra
   tbody, thead

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/_typography.sass

@@ -33,7 +33,7 @@ a
   color: darken(map-get($colors, blue), 25%)
   border-radius: $space/5
   padding: ($space/5)
-  font-family: monospace
+  font-family: $mono-font-family
   word-break: break-all
   word-wrap: break-word
   border: 0px !important

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

@@ -4,11 +4,14 @@
 // Page-level styling goes elsewhere.
 
 // Choose your theme
-@import themes/_canary
+@import themes/_default
 
 // Basic layout
 // ------------
 
+body
+  background-color: map-get($white, darkest)
+
 .wrapper
   +container
 
@@ -18,12 +21,26 @@
 
 #screen
   +screen
+  max-width: $xl-monitor
+  box-shadow: 0px 0px $space map-get($gray, darker)
+  margin: 0px auto
+  background: white
 
 // Navigation
 // ----------
 
 .main-navigation
-  +navbar($collapse: true, $layout: 'fluid', $background-color: map-get($brown, darkest))
+  +navbar($collapse: true, $layout: 'fluid', $background-color: transparent)
+
+  nav.expand
+    background: white
+    color: map-get($black, light)
+
+    > ul > li > a:not([role=button])
+      color: map-get($black, light)
+    
+    svg
+      fill: map-get($black, light)
 
   svg
     height: 30px
@@ -33,7 +50,7 @@
 // ------
 
 footer.main
-  background: map-get($brown, light)
+  background: map-get($gray, light)
   padding: $space 0
   color: white
 
@@ -41,6 +58,26 @@ footer.main
     color: white
     text-decoration: underline
 
+// Growl
+.growl
+  +alert
+
+  &.warning
+    background-color: map-get($colors, yellow)
+    color: black
+
+// Iframes
+// -------
+
+iframe.animation
+  max-width: 500px
+  height: 200px
+  display: block
+  margin-left: auto
+  margin-right: auto
+  margin-bottom: 25px
+  overflow: hidden
+
 // Components
 // ----------
 

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

@@ -0,0 +1,7 @@
+@import themes/_default
+
+.main-navigation
+  +navbar($background-color: white)
+
+  svg
+    fill: map-get($black, lighter)

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

@@ -0,0 +1,73 @@
+@import ../../themes/_default
+
+.row
+  +row
+
+.col-2
+  +column(2)
+
+.col-3
+  +column(3)
+
+.col-6
+  +column(6)
+
+.col-4
+  +column(4)
+
+.col-9
+  +column(9)
+
+.col-12
+  +column(12)
+
+.col-left-6
+  +left(6)
+
+.col-left-1
+  +left(1)
+
+.col-left-3
+  +left(3)
+
+.col-left-4
+  +left(4)
+
+.col-left-2
+  +left(2)
+
+.col-right-3
+  +right(3)
+
+.col-right-4
+  +right(4)
+
+.col-right-6
+  +right(6)
+
+.col-right-twothirds
+  +right('twothirds')
+
+.col-left-twothirds
+  +left('twothirds')
+
+.col-third
+  +column('third')
+
+.col-twothirds
+  +column('twothirds')
+
+.col-example
+  +root-element
+  background: map-get($white, darker)
+  color: map-get($black, lighter)
+  text-align: center
+
+  &.gray
+    background: white
+    margin:
+      bottom: 0
+      top: $space/2
+
+table
+  +table

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

@@ -2,73 +2,206 @@
 // ==================
 // Generic styles that should be shared across the documentation
 
-@import themes/_canary
+@import themes/_default
+
+h1
+  +heading-rg
+
+h2
+  +heading-xs
+
+h3, h4, h5, h6
+  +heading-xxs 
 
 .docs-nav
   +navbar($collapse: true, $layout: 'fluid')
   margin-top: -$space
 
 .fixed-area
-  @media screen and (max-width: $tablet)
+  margin-top: -$space
+
+  @media screen and (max-width: $phablet)
     +container
 
-.fixed-toc, .fixed-main
-  @media screen and (min-width: $tablet)
-    position: absolute
-    top: 88px
-    bottom: 0
-    overflow: auto
+  .fixed-main, .fixed-toc
+    @media screen and (min-width: $phablet)
+      float: left
+
+  .fixed-main
+    @media screen and (min-width: $phablet)
+      width: 50%
+
+    @media screen and (min-width: $tablet)
+      width: 75%
+
+    @media screen and (min-width: $large-monitor)
+      width: 80%
+
+  .fixed-toc
+    width: 100%
+    font-size: 0.85rem
+
+    a
+      color: map-get($colors, blue)
+
+    ul
+      +list($style: 'unstyled')
+      margin-bottom: 0
 
-.fixed-toc
-  ul
-    +list($style: 'unstyled')
+      > li
+        margin-bottom: 0 
 
-  @media screen and (min-width: $tablet)
-    left: 0
-    right: 50%
-    padding: $space
+        > ul
+          // border-left: 1px solid map-get($colors, blue)
+          padding-left: $space/3
+          margin-bottom: $space/3
 
     h1
-      +heading-xxs
+      +heading-xs 
 
-  @media screen and (min-width: $desktop)
-    right: 75%
+    @media screen and(min-width: $phablet)
+      padding: $space
+      width: 50%
 
-.fixed-main
-  @media screen and (min-width: $tablet)
-    left: 50%
-    right: 0
+    @media screen and (min-width: $tablet)
+      width: 25%
 
-  @media screen and (min-width: $desktop)
-    left: 25%
+    @media screen and (min-width: $large-monitor)
+      width: 20%
+
+  // When in fixed position
+  &.fixed
+    .fixed-toc 
+      @media screen and (min-width: $phablet)
+        position: fixed
+        top: 0px
+        bottom: 0
+        left: 0
+        right: 50%
+        overflow: auto
+
+      @media screen and (min-width: $tablet)
+        right: 75%
+
+      @media screen and (min-width: $large-monitor)
+        right: 80% 
+
+      @media screen and (min-width: $xl-monitor)
+        left: calc(50vw - #{$xl-monitor/2})
+
+    .fixed-main
+      @media screen and (min-width: $phablet)
+        margin-left: 50%
+
+      @media screen and (min-width: $tablet)
+        margin-left: 25%
+
+      @media screen and (min-width: $large-monitor)
+        margin-left: 20%
 
 .document
+  margin-bottom: $space * 4
 
   .code
     background: #1d1f21
-    padding: $space
+    padding: $space/4
 
-    > p:first-child
+    p:first-child
       display: none
 
+  @media screen and (min-width: $phablet)
+    .article, .code
+      padding: $space
+
   @media screen and (min-width: $desktop)
     display: flex
     justify-content: flex-start
     align-items: stretch
+    margin:
+      bottom: 0
+      top: 0
 
     .article, .code
       width: 50%
-      padding: $space
-        left: 0
-      border-bottom: 1px solid map-get($brown, lightest)
+      border-bottom: 1px solid map-get($white, darker)
 
     .code
-      padding: $space
       border-color: darken(map-get($colors, blue), 35%)
 
+    .article.article-full
+      width: 100%
+      position: relative
+
+      padding-right: calc(50% + #{$space})
+
+      &:after
+        content: ' '
+        display: block
+        position: absolute
+        top: 0
+        right: 0
+        left: 50%
+        bottom: -1px
+        // background: lighten(#1d1f21, 10%)
+        background: black
+        border-bottom: 1px solid map-get($black, light)
+
+.page_heading
+  +page_heading
+
+  h1
+    +heading-md
+
+    @media screen and (min-width: $phablet)
+      padding-left: $space
+      margin-bottom: 0
+
+  @media screen and (min-width: $phablet)
+    margin-top: $space
+
+  @media screen and (min-width: $desktop)
+    margin-bottom: 0
+
 // Highlight JS
 
 code, pre, kbd, samp
   &.hljs
     font-size: 0.9rem
+    font-family: $mono-font-family
+
+// Main page overrides
+.main-navigation
+  svg
+    fill: map-get($black, lighter)
+
+  +navbar($collapse: true, $background-color: white)
+
+// Optional doc blocks toggling
+.if-semantic, .if-jquery
+  display: none
+
+span.ifnot-semantic, span.ifnot-jquery
+  display: inline
+
+body.show-semantic
+  .ifnot-semantic
+    display: none
+
+  .if-semantic
+    display: block
+
+  span.if-semantic
+    display: inline
+    
+body.show-jquery
+  .ifnot-jquery
+    display: none
+
+  .if-jquery
+    display: block
+
+  span.if-jquery
+    display: inline
 
+.example
+  margin-bottom: $space