flatui-rails 0.0.1

data/vendor/assets/stylesheets/flat-ui/modules/_footer.sass

@@ -0,0 +1,57 @@
+// Footer
+footer
+  background-color: desaturate(scale-color($base, $lightness: 91%), 15%)
+  color: desaturate(scale-color($base, $lightness: 66%), 22%)
+  font-size: 15px
+  padding: 0
+
+  a
+    color: desaturate(scale-color($base, $lightness: 50%), 25%)
+    font-weight: 700
+
+  p
+    font-size: 15px
+    line-height: 20px
+
+.footer-title
+  margin: 0 0 22px
+  padding-top: 21px
+
+.footer-brand
+  display: block
+  margin-bottom: 26px
+  width: 220px
+
+  img
+    width: 216px
+
+// Footer banner
+.footer-banner
+  background-color: $firm
+  color: scale-color(desaturate($firm, 15%), $lightness: 80%)
+  margin-left: 42px
+  min-height: 286px
+  padding: 0 30px 30px
+
+  .footer-title
+    color: $inverse
+
+  a
+    color: scale-color(desaturate($firm, 15%), $lightness: 80%)
+    text-decoration: underline
+    &:hover
+      text-decoration: none
+
+  ul
+    list-style-type: none
+    margin: 0 0 26px
+
+    li
+      border-top: 1px solid scale-color($firm, $lightness: 4%)
+      line-height: 19px
+      padding: 6px 0
+      &:first-child
+        border-top: none
+        padding-top: 1px
+
+

data/vendor/assets/stylesheets/flat-ui/modules/_input.sass

@@ -0,0 +1,66 @@
+=input-states($color)
+  border-color: $color
+  color: $color
+  +box-shadow(none)
+  &:focus
+    +box-shadow(none)
+
+// Text fields
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"],
+.uneditable-input
+  border: 2px solid scale-color($base, $lightness: 85%)
+  color: $base
+  font-family: $base-font-family
+  font-size: $base-font-size
+  padding: 8px 0 9px 10px
+  text-indent: 1px
+  +border-radius(6px)
+  +box-shadow(none)
+  +placeholder-color(desaturate(scale-color($base, $lightness: 60%), 15%))
+
+  &:focus
+    border-color: $firm
+    +box-shadow(none)
+
+  .control-group.error &
+    +input-states($danger)
+
+  .control-group.success &
+    +input-states($success)
+
+  .control-group.warning &
+    +input-states($warning)
+
+  .control-group.info &
+    +input-states($info)
+
+// Disabled state -----------------
+input[disabled],
+input[readonly],
+textarea[disabled],
+textarea[readonly]
+  background-color: scale-color($gray, $lightness: 80%)
+  border-color: transparent
+  color: scale-color($gray, $lightness: 50%)
+  cursor: default
+
+// Text field grids -----------------
+input,
+textarea,
+.uneditable-input
+  width: 192px
+

data/vendor/assets/stylesheets/flat-ui/modules/_login.sass

@@ -0,0 +1,95 @@
+$form-color: scale-color(desaturate($base, 15%), $lightness: 91%)
+
+// Login screen
+.login
+  background: url('../images/login/imac.png') 0 0 no-repeat
+  background-size: 940px 778px
+  color: $inverse
+  margin-bottom: 77px
+  padding: 38px 38px 267px
+  position: relative
+
+.login-screen
+  background-color: $firm
+  min-height: 317px
+  padding: 123px 199px 33px 306px
+
+.login-icon
+  left: 200px
+  position: absolute
+  top: 160px
+  width: 96px
+
+  > img
+    display: block
+    margin-bottom: 6px
+    width: 100%
+
+  > h4
+    font-size: 17px
+    font-weight: 200
+    line-height: 34px
+    opacity: .95
+
+    small
+      color: inherit
+      display: block
+      font-size: inherit
+      font-weight: 700
+
+// Login form
+.login-form
+  background-color: $form-color
+  border-radius: 6px
+  padding: 24px 23px 20px
+  position: relative
+
+  // Ear
+  &:before
+    content: ''
+    border-style: solid
+    border-width: 12px 12px 12px 0
+    border-color: transparent $form-color transparent transparent
+    height: 0px
+    position: absolute
+    left: -12px
+    top: 35px
+    width: 0
+    // Make corners smooth
+    -webkit-transform: rotate(360deg)
+
+  .control-group
+    margin-bottom: 6px
+    position: relative
+
+  .login-field
+    border-color: transparent
+    font-size: 17px
+    padding-bottom: 11px
+    padding-top: 11px
+    text-indent: 3px
+    width: 299px
+    &:focus
+      & + .login-field-icon
+        color: $firm
+
+  .login-field-icon
+    color: scale-color($gray, $lightness: 40%)
+    font-size: 16px
+    position: absolute
+    right: 13px
+    top: 14px
+    +transition(.25s)
+
+.login-link
+  color: scale-color($gray, $lightness: 40%)
+  display: block
+  font-size: 13px
+  margin-top: 15px
+  text-align: center
+
+// Serving 2x images
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2)
+  .login
+    background-image: url('../images/login/imac-2x.png')
+

data/vendor/assets/stylesheets/flat-ui/modules/_navbar.sass

@@ -0,0 +1,149 @@
+// Top navigation
+.navbar
+  font-size: 18px
+
+  .brand
+    color: $firm
+    font-size: inherit
+    font-weight: 700
+    padding-bottom: 16px
+    padding-top: 15px
+
+  .nav
+    // First level nav
+    > li
+      &:hover
+        > ul
+          top: 100%
+
+      // Second level nav
+      > ul
+        padding-top: 13px
+        top: 80%
+        // IE treats transparent background as not hoverable area. Let's fix that.
+        background-color: #{$inverse}\9
+        // Dropdown triangle ear
+        +dropdown-arrow
+
+        // Third level nav
+        li
+          &:hover
+            ul
+              opacity: 1
+              -webkit-transform: scale(1, 1)
+              display: block\9
+          ul
+            left: 100%
+
+      // First level level
+      > a
+        padding: 14px 15px 17px
+        &:hover
+          color: $firm
+
+    li
+      position: relative
+
+      &:hover
+        > ul
+          opacity: 1
+          z-index: 100
+          -webkit-transform: scale(1, 1)
+          // Show on hover
+          display: block\9
+
+    // Sub menu
+    ul
+      border-radius: 4px
+      left: 15px
+      list-style-type: none
+      margin-left: 0
+      opacity: 0
+      position: absolute
+      top: 0
+      width: 234px
+      z-index: -100
+      // Trigger transform to hide nav completely without 'ghost' bug (when switching from :hover to initial)
+      -webkit-transform: scale(1, .99)
+      -webkit-transform-origin: 0 0
+      // Don't show it at all by default since IE doesn't get modern transitions
+      display: none\9
+      +transition(.3s ease-out)
+
+      // Deep level sub menu
+      ul
+        left: 95%
+        padding-left: 5px
+
+      // Sub menu item
+      li
+        background-color: $base
+        padding: 0 3px 3px
+
+        &:first-child
+          border-radius: 4px 4px 0 0
+          padding-top: 3px
+
+        &:last-child
+          border-radius: 0 0 4px 4px
+
+        &.active
+          > a, > a:hover
+            background-color: $firm
+            color: $inverse
+
+      // Sub menu link
+      a
+        border-radius: 2px
+        color: $inverse
+        display: block
+        font-size: 14px
+        padding: 6px 9px
+        text-decoration: none
+        &:hover
+          background-color: $firm
+
+.navbar-inner
+  border: none
+  padding-left: 4px
+  padding-right: 4px
+  +border-radius(6px)
+  +drop-ie-gradient
+
+// Inverse skin --------------------------
+.navbar-inverse
+  .navbar-inner
+    background: $base
+    +drop-ie-gradient
+
+  .nav
+    > li > a
+      color: $inverse
+
+    .active > a
+      &, &:hover, &:focus
+        background-color: transparent
+        color: $firm
+        +box-shadow(none)
+
+// Unread icon ---------------------------
+.navbar-unread
+  background-color: $danger
+  border-radius: 30px
+  color: $inverse
+  display: none
+  font-size: 12px
+  font-weight: 500
+  line-height: 18px
+  min-width: 8px
+  padding: 0 5px
+  position: absolute
+  right: -7px
+  text-align: center
+  text-shadow: none
+  top: 8px
+  z-index: 10
+
+  .active &
+    display: block
+

data/vendor/assets/stylesheets/flat-ui/modules/_pager.sass

@@ -0,0 +1,56 @@
+// Pager module
+$pager-padding: 9px 18px 10px
+
+.pager
+  background-color: $base
+  border-radius: 6px
+  color: $inverse
+  font-size: 16px
+  font-weight: 700
+  +inline-block
+
+  li
+    &:first-child
+      > a, > span
+        border-left: none
+        padding-left: 20px
+        +border-radius(6px 0 0 6px)
+
+        img
+          margin-left: 0
+          margin-right: 13px
+          margin-left: 0\9
+          margin-right: 9px\9
+
+    &.pager-center
+      padding: $pager-padding
+      padding-left: 0
+      padding-right: 0
+      +inline-block
+
+    &.previous, &.next
+      img
+        // For retina 2x image that is scaled down to 14px for all common screens
+        height: 14px
+        margin: -1px 0 0 13px
+        margin-left: 9px\9
+        vertical-align: middle
+
+
+    > a, > span
+      background: none
+      border: none
+      border-left: 2px solid scale-color($base, $lightness: -15%)
+      color: $inverse
+      padding: $pager-padding
+      padding-left: 7px
+      text-decoration: none
+      white-space: nowrap
+      +border-radius(0 6px 6px 0)
+
+      &:hover, &:focus
+        background-color: scale-color($base, $lightness: 20%)
+
+      &:active
+        background-color: scale-color($base, $lightness: -15%)
+

data/vendor/assets/stylesheets/flat-ui/modules/_pagination.sass

@@ -0,0 +1,75 @@
+// Pagination (very similar to Pager)
+$pagination-color: desaturate(lighten($base, 57.5%), 17%)
+
+.pagination
+  ul
+    background: $pagination-color
+    +border-radius(6px)
+    +box-shadow(none)
+
+    > li
+      &:first-child
+        +border-radius(6px 0 0 6px)
+
+      &:last-child
+        +border-radius(0 6px 6px 0)
+
+      &.previous,
+      &.next
+        > a, > span
+          background: transparent
+          border: none
+          border-right: 2px solid $inverse !important
+          margin: 0 9px 0 0
+          padding: 11px 17px 12px 17px
+          +border-radius(6px 0 0 6px)
+          +box-shadow(none !important)
+
+      &.next
+        > a, > span
+          border-left: 2px solid $inverse !important
+          margin-left: 9px
+          margin-right: 0
+          +border-radius(0 6px 6px 0)
+
+      &.active
+        > a, > span
+          background-color: $inverse
+          border-color: $inverse
+          border-width: 2px
+          color: $pagination-color
+          margin: 10px 5px 9px
+
+          &:hover, &:focus
+            background-color: $inverse
+            border-color: $inverse
+            color: $pagination-color
+            +box-shadow(none)
+
+      > a, > span
+        background: $inverse
+        border: 5px solid $pagination-color
+        border-radius: 50px
+        color: $inverse
+        line-height: 16px
+        margin: 7px 2px 6px
+        padding: 0 4px
+        +transition((background .2s ease-out, border-color 0s ease-out, color .2s ease-out))
+
+        &:hover, :focus
+          background-color: $firm
+          border-color: $firm
+          color: $inverse
+          +transition((background .2s ease-out, border-color .2s ease-out, color .2s ease-out))
+
+        &:active
+          background-color: scale-color($firm, $lightness: -15%)
+          border-color: scale-color($firm, $lightness: -15%)
+
+    img
+      // For retina 2x image that is scaled down to 14px for all common screens
+      height: 14px
+      margin-top: -1px
+      vertical-align: middle
+      width: 13px
+