flatui3-rails 0.0.1

data/vendor/toolkit/flat-ui/modules/footer.less

@@ -0,0 +1,75 @@
+//
+// Footer
+// --------------------------------------------------
+
+footer {
+  background-color: mix(@base, @inverse, 9%);
+  color: mix(@base, @inverse, 34%);
+  font-size: 15px;
+  padding: 0;
+
+  a {
+    color: mix(@base, @inverse, 50%);
+    font-weight: 700;
+  }
+  p {
+    font-size: 15px;
+    line-height: 20px;
+  }  
+}
+
+.footer-title {
+  margin: 0 0 22px;
+  padding-top: 21px;
+  font-size: 24px;
+  line-height: 40px;
+}
+
+.footer-brand {
+  display: block;
+  margin-bottom: 26px;
+  width: 220px;
+
+  img {
+    width: 216px;
+  }  
+}
+
+// FOOTER BANNER
+// ----------------------
+.footer-banner {
+  background-color: @firm;
+  color: mix(@firm, @inverse, 20%);
+  margin-left: 42px;
+  min-height: 316px;
+  padding: 0 30px 30px;
+
+  .footer-title {
+    color: @inverse;
+  }
+  a {
+    color: lighten(@firm, 42%);
+    text-decoration: underline;
+    
+    &:hover {
+      text-decoration: none;
+    }  
+  }
+  ul {
+    list-style-type: none;
+    margin: 0 0 26px;
+    padding: 0;
+
+    li {
+      border-top: 1px solid lighten(@firm, 2%);
+      line-height: 19px;
+      padding: 6px 0;
+      
+      &:first-child {
+        border-top: none;
+        padding-top: 1px;
+      }  
+    }    
+  }      
+}
+

data/vendor/toolkit/flat-ui/modules/forms.less

@@ -0,0 +1,127 @@
+//
+// Forms
+// --------------------------------------------------
+
+// Textarea
+textarea {
+  font-size: ceil(@font-size-base * 1.071); // ~15px
+  line-height: 24px;
+  padding: 5px 11px;
+}
+
+// Label
+label {
+	font-weight: normal;
+	line-height: @line-height-base * 1.1605em; // ~20px
+}
+
+// Placeholder
+//
+// Placeholder text gets special styles because when browsers invalidate entire
+// lines if it doesn't understand a selector/
+.form-control {
+  .placeholder-color(desaturate(lighten(@base, 45%), 15%));
+}
+
+// Common form controls
+//
+// Shared size and type resets for form controls. Apply `.form-control` to any
+// of the following form controls:
+//
+// select
+// 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"]
+
+.form-control {
+  border: 2px solid @lightgray;
+  color: @base;
+  font-family: @font-family-base;
+  font-size: ceil(@font-size-base * 1.071); // ~15px
+  padding: 8px 12px;
+  height: 41px;
+  -webkit-appearance: none;
+  border-radius: @input-border-radius;
+  .box-shadow(none);
+  .transition(~"border .25s linear, color .25s linear, background-color .25s linear");
+
+  // Customize the `:focus` state
+  .form-control-focus();
+
+	// Disabled and read-only inputs
+  // Note: HTML5 says that controls under a fieldset > legend:first-child won't
+  // be disabled if the fieldset is disabled. Due to implementation difficulty,
+  // we don't honor that edge case; we style them as disabled anyway.
+  &[disabled],
+  &[readonly],
+  fieldset[disabled] & {
+    background-color: @input-bg-disabled;
+	  border-color: mix(@gray, white, 40%);
+	  color: mix(@gray, white, 40%);
+	  cursor: default;
+  }  
+  
+  // Flat (without border)
+  &.flat {
+    border-color: transparent;
+    
+    &:hover {
+      border-color: @lightgray;
+    }
+    &:focus {
+      border-color: @firm;
+    }
+  }
+}
+
+// Form control sizing
+.input-sm {
+  .input-size(@input-height-small; 8px; 10px; floor(@font-size-base * 0.929); @line-height-base);
+}
+
+.input-lg {
+  .input-size(@input-height-large; 10px; 15px; ceil(@font-size-base * 1.214); @line-height-base);
+}
+
+.input-hg {
+	.input-size(@input-height-huge; 10px; 16px; ceil(@font-size-base * 1.571); @line-height-base);
+}
+
+// Form control feedback states
+//
+// Apply contextual and semantic states to individual form controls.
+
+// Warning
+.has-warning {
+  .form-control-validation(@warning; @warning);
+}
+// Error
+.has-error {
+  .form-control-validation(@danger; @danger);
+}
+// Success
+.has-success {
+  .form-control-validation(@success; @success);
+}
+
+// Form groups
+//
+// Designed to help with the organization and spacing of vertical forms. For
+// horizontal forms, use the predefined grid classes.
+
+.form-group {
+	position: relative;
+  margin-bottom: 20px;
+}

data/vendor/toolkit/flat-ui/modules/input-icons.less

@@ -0,0 +1,71 @@
+//
+// Input Icons
+// --------------------------------------------------
+
+.form-group {
+  position: relative;
+}
+
+.form-control {
+	& + .input-icon {
+		position: absolute;
+	  top: 2px;
+	  right: 2px;
+	  line-height: 37px;
+	  vertical-align: middle;
+	  font-size: ceil(@font-size-base * 1.428); // ~20px
+	  color: desaturate(lighten(@base, 45%), 15%);
+	  background-color: @inverse;
+	  padding: 0 12px 0 0;
+	  border-radius: @input-border-radius;
+	}
+}
+
+// Icons sizing
+// ---------------------------
+
+// Huge
+.input-hg + .input-icon {
+  line-height: 49px;
+  padding: 0 16px 0 0;
+}
+
+//Large
+.input-lg + .input-icon {
+  line-height: 41px;
+  padding: 0 15px 0 0;
+}
+
+// Small
+.input-sm + .input-icon {
+  font-size: @font-size-base;
+  line-height: 30px;
+  padding: 0 10px 0 0;
+}
+
+
+// Icons states
+// ---------------------------
+
+.has-success {
+  .input-icon {
+	  color: @success;
+  }
+}
+.has-warning {
+	.input-icon {
+		color: @warning;
+	}  
+}
+.has-error {
+	.input-icon {
+		color: @danger;
+	}  
+}
+.form-control[disabled] + .input-icon,
+.form-control[readonly] + .input-icon,
+fieldset[disabled] .form-control + .input-icon,
+.form-control.disabled + .input-icon {
+		color: mix(@gray, white, 40%);
+		background-color: mix(@gray, white, 10%);
+}

data/vendor/toolkit/flat-ui/modules/login.less

@@ -0,0 +1,111 @@
+//
+//  Login screen
+// --------------------------------------------------
+
+// Module color variable
+@form-color: mix(@base, @inverse, 9%);
+
+.login {
+  background: asset-url("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: 473px;
+  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;
+  padding: 24px 23px 20px;
+  position: relative;
+  border-radius: @border-radius-large;  
+
+  // Ear
+  &:before {
+    content: '';
+    border-style: solid;
+    border-width: 12px 12px 12px 0;
+    border-color: transparent @form-color transparent transparent;
+    height: 0;
+    position: absolute;
+    left: -12px;
+    top: 35px;
+    width: 0;    
+    -webkit-transform: rotate(360deg); // Make corners smooth
+  }
+  .control-group {
+    margin-bottom: 6px;
+    position: relative;
+  }
+  .login-field {
+    border-color: transparent;
+    font-size: 17px;
+    text-indent: 3px;
+    
+    &:focus {
+    	border-color: @firm;
+    	
+      & + .login-field-icon {
+        color: @firm;
+      }  
+    }    
+  }
+  .login-field-icon {
+    color: mix(@gray, @inverse, 60%);
+    font-size: 16px;
+    position: absolute;
+    right: 13px;
+    top: 9px;
+    .transition(.25s);
+  }  
+}
+
+.login-link {
+  color: mix(@gray, @inverse, 60%);
+  display: block;
+  font-size: 13px;
+  margin-top: 15px;
+  text-align: center;
+}
+
+// Retina support
+@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 (-moz-min-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: asset-url("login/imac-2x.png");
+  }  
+}    
+

data/vendor/toolkit/flat-ui/modules/navbar.less

@@ -0,0 +1,487 @@
+//
+// Navbar
+// --------------------------------------------------
+
+.navbar {
+  font-size: ceil(@font-size-base * 1.142); // ~16px
+  border-radius: @border-radius-large;
+  background: mix(@base, white, 9.5%);
+  border: none;
+
+	.navbar-collapse {
+		padding-left: 0;
+		padding-right: 0;
+	}
+
+  .navbar-brand {
+    border-radius: @border-radius-large 0 0 @border-radius-large;
+    color: mix(@base, white, 85%);
+    font-size: ceil(@font-size-base * 1.714); // ~24px
+    line-height: 29.55px;
+    font-weight: 700;
+    margin-left: -15px;
+    padding: 23px 28px 24px 17px;
+    text-shadow: none;
+    display: inline-block;
+    
+    &:hover,
+    &:focus {
+      color: @firm;
+    }
+    &[class*="fui-"] {
+      font-weight: normal;
+    }
+    small { line-height: 1; }
+  }
+
+  .nav {
+    margin-right: 0;
+    display: inline-block;
+    float: left;
+
+    // First level nav
+    > li {
+      position: relative;
+      display: inline-block;
+
+      &:hover {
+        > ul {
+          opacity: 1;
+          top: 100%;
+          visibility: visible;
+          z-index: 100;
+          -webkit-transform: scale(1, 1);
+          // Show on hover
+          display: block\9;
+        }
+      }
+      &.active {
+        > a,
+        > a:hover,
+        > a:focus {
+          background: none;
+          color: @firm;
+          .box-shadow(none);
+        }
+      }
+      &:first-child {
+        border-radius: @border-radius-large @border-radius-large 0 0;
+      }
+      &:last-child {
+        border-radius: 0 0 @border-radius-large @border-radius-large;
+      }
+
+      // Second level nav
+      > ul {
+        padding-top: 13px;
+        top: 80%;
+        padding-left: 0;
+        .dropdown-arrow(@base);
+
+        // Third level nav
+        li {
+          &:hover {
+            ul {
+              opacity: 1;
+              -webkit-transform: scale(1, 1);
+              visibility: visible;
+              display: block\9;
+            }
+          }
+          ul {
+            left: 100%;
+          }
+        }
+      }
+
+      // First level link
+      > a {
+        color: mix(@base, white, 85%);
+        display: inline-block;
+        font-weight: 700;
+        font-size: ceil(@font-size-base * 1.071); // ~15px
+        line-height: 28px;
+        padding: 22px @navbar-link-space;
+        text-shadow: none;
+        .transition(~"background-color .25s, color .25s, border-bottom-color .25s");
+
+        &:hover,
+        &:focus {
+          color: @firm;
+          background-color: transparent;
+        }
+        &[class*="fui-"] {
+          font-size: 24px;
+          font-weight: normal;
+        }
+        
+        > [class*="fui-"] {
+          font-size: 24px;
+          margin: -4px 0 0;
+          position: relative;
+          top: 4px;
+        }
+        
+        > [class*="fui-"] + * {
+          margin-left: 12px;
+        }
+      }
+    }
+    
+    > li:first-child {        
+      > a {
+        border-radius: 0 0 0 @border-radius-large;
+      }
+    }
+
+    // Sub menu
+    ul {
+      border-radius: 4px;
+      left: 0;
+      list-style-type: none;
+      margin-left: 0;
+      opacity: 0;
+      position: absolute;
+      top: 0;
+      width: 234px;
+      // Trigger transform to hide nav completely without 'ghost' bug (when switching from :hover to initial)
+      -webkit-transform: scale(1, 0.99);
+      -webkit-transform-origin: 0 0;
+      // Don't show it at all by default since IE doesn't get modern transitions
+      visibility: hidden;
+      .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;
+        position: relative;
+
+        &:first-child {
+          border-radius: @border-radius-large @border-radius-large 0 0;
+          padding-top: 3px;
+        }
+        &:last-child {
+          border-radius: 0 0 @border-radius-large @border-radius-large;
+        }
+        &.active {
+          > a,
+          > a:hover,
+          > a:focus {
+            background-color: @firm;
+            color: @inverse;
+            padding-left: @navbar-sublink-space;
+            padding-right: @navbar-sublink-space;
+          }
+          & + li {
+            > a {
+              padding-left: @navbar-sublink-space;
+              padding-right: @navbar-sublink-space;
+            }
+          }
+        }
+      }
+
+      // Sub menu link
+      a {
+        border-radius: 2px;
+        color: @inverse;
+        display: block;
+        font-size: @font-size-base;
+        padding: 6px @navbar-sublink-space;
+        text-decoration: none;
+
+        &:hover {
+          background-color: @firm;
+        }
+      }
+    }
+  }
+
+  // Expand/collapse button
+  .btn-navbar {
+    background: none;
+    border: none;
+    color: @base;
+    margin: 18px 15px 14px;
+    text-shadow: none;
+    display: none;
+
+    &:hover,
+    &:focus {
+      background: none;
+      color: @firm;
+    }
+    &:before {
+      content: "\e00c";
+      font-family: "Flat-UI-Icons";
+      font-size: ceil(@font-size-base * 1.571);
+      font-style: normal;
+      font-weight: normal;
+      -webkit-font-smoothing: antialiased;
+    }
+    .icon-bar {
+      display: none;
+    }
+  }
+}
+
+.navbar-inner {
+  background: mix(@base, white, 9.5%);
+  border: none;
+  padding-left: 0;
+  padding-right: 0;
+  border-radius: @border-radius-large;
+}
+
+// Alternate Color
+// --------------------------------------------------
+.navbar-inverse {
+  font-size: ceil(@font-size-base * 1.214); // ~17px
+  background-color: @base;
+  
+  .navbar-brand {
+    border-bottom: 2px solid mix(@base, black, 85%);
+    border-right: 2px solid mix(@base, black, 85%);
+    color: @inverse;
+    padding: 10px 28px 11px 32px;
+  }
+  .btn-navbar {
+    color: @inverse;
+    margin: 7px 10px;
+  }
+  .btn-icon {
+    margin: 8px 5px 8px 15px;
+  }
+  .nav {
+    > li {
+      &:first-child {
+        &.active {
+          > a {
+            padding-left: @navbar-link-space;
+          }
+        }
+        > a {
+          border-left: none;
+        }
+      }
+
+      // Active item
+      &.active {
+        > a {
+          &,
+          &:hover,
+          &:focus {
+            background-color: @firm;
+            border-bottom-color: mix(@firm, black, 85%);
+            border-left: none;
+            color: @inverse;
+            padding-left: @navbar-link-space;
+          }
+        }
+        & + li {
+          > a {
+            border-left: none;
+            padding-left: @navbar-link-space;
+          }
+        }
+      }
+
+      // Link styling
+      > a {
+        font-size: floor(@font-size-base * 1.143); // ~16px
+        border-bottom: 2px solid mix(@base, black, 85%);
+        border-left: 2px solid mix(@base, black, 85%);
+        color: @inverse;
+        padding: 16px @navbar-link-space 15px;
+        line-height: 20px;
+      }
+    }
+  }
+  .nav.pull-right {
+	  margin-right: -15px;
+  }
+
+  // Round corders of the pull-right dropdown
+  .nav.pull-right > li {
+    > a {
+      border-radius: 0 @border-radius-large @border-radius-large 0;
+    }
+  }
+}
+
+// Unread icon
+.navbar-unread,
+.navbar-new {
+  font-family: @font-family-base;
+  background-color: @firm;
+  border-radius: 50%;
+  color: @inverse;
+  font-size: 0;
+  font-weight: 700;
+  height: 6px;
+  line-height: @font-size-base;
+  position: absolute;
+  right: 12px;
+  text-align: center;
+  top: 28px;
+  width: 6px;
+  z-index: 10;
+
+  .active & {
+    background-color: @inverse;
+    display: none;
+  }
+  .navbar-inverse & {
+    top: 15px;
+  }
+}
+
+.navbar-new {
+  background-color: @danger;
+  font-size: 12px;
+  line-height: 17px;
+  height: 18px;
+  margin: -9px -1px;
+  min-width: 18px;
+  padding: 0 1px;
+  width: auto;
+  -webkit-font-smoothing: subpixel-antialiased;
+}
+
+// DROPDOWN LIST
+// -----------
+.navbar {
+  // Inverse navbar dropdown styling
+  &.navbar-inverse {
+    .nav li.dropdown {
+      &.open {
+        > .dropdown-toggle {
+          background-color: @firm;
+          border-bottom-color: mix(@firm, black, 85%);
+          color: @inverse;
+
+          .caret {
+            border-bottom-color: @inverse !important;
+            border-top-color: @inverse !important;
+          }
+        }
+      }
+    }
+  }
+
+  // Default navbar dropdown styling
+  .nav li.dropdown {
+    &.open {
+      > .dropdown-toggle {
+        background: none;
+        color: @firm;
+
+        .caret {
+          border-bottom-color: @firm !important;
+          border-top-color: @firm !important;
+        }
+      }
+      .dropdown-menu {
+        opacity: 1;
+        top: 100%;
+        visibility: visible;
+        z-index: 1000;
+        -webkit-transform: none;
+      }
+    }
+    > .dropdown-toggle {
+      outline: none;
+
+      &:hover,
+      &:focus {
+        .caret {
+          border-bottom-color: @firm;
+          border-top-color: @firm;
+        }
+      }
+      .caret {
+        border-left-width: 6px;
+        border-right-width: 6px;
+        border-top-width: 8px;
+        border-bottom-color: lighten(@base, 13%);
+        border-top-color: lighten(@base, 13%);
+        margin-left: 10px;
+      }
+    }
+    .dropdown-menu {
+      background-color: @base;
+      opacity: 0;
+      padding: 0;
+      visibility: hidden;
+
+      &:before {
+        display: none;
+      }
+      &:after {
+        border-bottom-color: @base;
+      }
+      > li {
+        > a {
+          border-radius: 3px;
+          color: @inverse;
+          padding: 6px 8px 8px;
+        }
+      }
+      .divider {
+        background-color: mix(@base, black, 85%);
+        border-bottom: none;
+        margin: 2px 0 5px;
+        padding: 0;
+        height: 2px;
+      }
+    }
+  }
+}
+
+// Fixed top/bottom
+.navbar.navbar-fixed-bottom,
+.navbar.navbar-fixed-top {
+  .navbar-inner {
+    .navbar-search {
+      .form-control {
+        border-radius: 50px 0 0 50px !important;
+      }
+      .btn {
+        border-radius: 0 50px 50px 0;
+      }
+    }
+  }
+}
+
+.navbar.navbar-fixed-bottom {
+  .nav {
+    > li {
+      &:hover {
+        > ul {
+          bottom: 100%;
+          padding-bottom: 13px;
+          top: auto;
+
+          li:hover {
+            ul {
+              bottom: 0;
+            }
+          }
+        }
+      }
+    }
+
+    // Dropdown list
+    ul {
+      bottom: 80%;
+      top: auto;
+    }
+  }
+}