flatui-rails-less 1.0

data/vendor/assets/stylesheets/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: @input-icon-font-size;
+	  color: desaturate(lighten(@brand-primary, 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: @brand-success;
+  }
+}
+.has-warning {
+	.input-icon {
+		color: @brand-warning;
+	}  
+}
+.has-error {
+	.input-icon {
+		color: @brand-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/assets/stylesheets/modules/login.less

@@ -0,0 +1,111 @@
+//
+//  Login screen
+// --------------------------------------------------
+
+// Module color variable
+@form-color: mix(@brand-primary, @inverse, 9%);
+
+.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: @brand-secondary;
+  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: 300;
+    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: @brand-secondary;
+    	
+      & + .login-field-icon {
+        color: @brand-secondary;
+      }  
+    }    
+  }
+  .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: ~"url(../images/login/imac-2x.png)";
+  }  
+}    
+

data/vendor/assets/stylesheets/modules/navbar.less

@@ -0,0 +1,551 @@
+//
+// Navbar
+// --------------------------------------------------
+
+.navbar {
+  font-size: floor(@component-font-size-base * 1.067); // ~16px
+  border-radius: @border-radius-large;
+  border: none;
+
+  .navbar-brand {
+    border-radius: @border-radius-large 0 0 @border-radius-large;
+    color: mix(@brand-primary, white, 85%);
+    font-size: floor(@component-font-size-base * 1.60); // ~24px
+    line-height: 29.55px;
+    font-weight: 700;
+    padding: 23px 28px 24px 17px;
+    text-shadow: none;
+    display: inline-block;
+    
+    &:hover,
+    &:focus {
+      color: @brand-secondary;
+    }
+    &[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: @brand-secondary;
+          .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(@brand-primary);
+
+        // 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(@brand-primary, white, 85%);
+        display: inline-block;
+        font-weight: 700;
+        font-size: @component-font-size-base; // ~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: @brand-secondary;
+          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;
+        }
+      }
+    }
+
+    // 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(.25s ease-out);
+
+      // Deep level sub menu
+      ul {
+        left: 95%;
+        padding-left: 5px;
+      }
+
+      // Sub menu item
+      li {
+        background-color: @brand-primary;
+        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: @brand-secondary;
+            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: ceil(@component-font-size-base * 0.933);
+        padding: 6px @navbar-sublink-space;
+        text-decoration: none;
+
+        &:hover {
+          background-color: @brand-secondary;
+        }
+      }
+    }
+    
+    &.navbar-left {
+	    li:first-child {
+		    a {
+			    border-radius: @border-radius-large 0 0 @border-radius-large;
+			    border-left: none;
+		    }
+	    }
+    }
+  }
+
+  // Expand/collapse button
+  .btn-navbar {
+    background: none;
+    border: none;
+    color: @brand-primary;
+    margin: 18px 15px;
+    padding: 3px 15px;
+    text-shadow: none;
+    display: none;
+
+    &:hover,
+    &:focus {
+      background: none;
+      color: @brand-secondary;
+    }
+    &:before {
+      content: "\e00c";
+      font-family: "Flat-UI-Icons";
+      font-size: ceil(@component-font-size-base * 1.467); // ~22px
+      font-style: normal;
+      font-weight: normal;
+      -webkit-font-smoothing: antialiased;
+    }
+    .icon-bar {
+      display: none;
+    }
+  }
+}
+
+.navbar-default {
+  background: mix(@brand-primary, white, 9.5%);
+  border: none;
+  padding-left: 0;
+  padding-right: 0;
+  border-radius: @border-radius-large;
+}
+
+// Alternate Color
+// --------------------------------------------------
+.navbar-inverse {
+	background: @brand-primary;
+  font-size: ceil(@component-font-size-base * 1.133); // ~17px
+  
+  .navbar-brand {
+    border-bottom: 2px solid mix(@brand-primary, black, 85%);
+    border-right: 2px solid mix(@brand-primary, 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: @brand-secondary;
+            border-bottom-color: mix(@brand-secondary, 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(@component-font-size-base * 1.067); // ~16px
+        border-bottom: 2px solid mix(@brand-primary, black, 85%);
+        border-left: 2px solid mix(@brand-primary, black, 85%) !important;
+        color: @inverse;
+        padding: 16px @navbar-link-space 15px;
+        line-height: 20px;
+      }
+    }
+  }
+
+	.nav.navbar-right {
+		.dropdown-menu {
+			left: -100%;
+			margin-left: 17px;
+		}
+		.open > .dropdown-menu:before {
+			display: block !important;
+		}
+	}
+  // Round corders of the pull-right dropdown
+  .nav.navbar-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: @brand-secondary;
+  border-radius: 50%;
+  color: @inverse;
+  font-size: 0;
+  font-weight: 700;
+  height: 6px;
+  line-height: 14px;
+  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: @brand-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: @brand-secondary;
+          border-bottom-color: mix(@brand-secondary, 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: @brand-secondary;
+
+        .caret {
+          border-bottom-color: @brand-secondary !important;
+          border-top-color: @brand-secondary !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: @brand-secondary;
+          border-top-color: @brand-secondary;
+        }
+      }
+      .caret {
+        border-left-width: 6px;
+        border-right-width: 6px;
+        border-top-width: 8px;
+        border-bottom-color: lighten(@brand-primary, 13%);
+        border-top-color: lighten(@brand-primary, 13%);
+        margin-left: 10px;
+      }
+    }
+    .dropdown-menu {
+      background-color: @brand-primary;
+      opacity: 0;
+      padding: 0;
+      visibility: hidden;
+
+      &:before {
+        display: none;
+      }
+      &:after {
+        border-bottom-color: @brand-primary;
+      }
+      > li {
+        > a {
+          border-radius: 3px;
+          color: @inverse;
+          padding: 6px 8px 8px;
+        }
+      }
+      .divider {
+        background-color: mix(@brand-primary, black, 85%);
+        border-bottom: none;
+        margin: 2px 0 5px;
+        padding: 0;
+        height: 2px;
+      }
+    }
+  }
+}
+
+// SEARCH BOX
+// -----------
+.navbar {
+  // Inverse navbar search box styling
+  &.navbar-inverse {
+    .navbar-form {
+      border-left: 2px solid mix(@brand-primary, black, 85%);
+      border-bottom: 2px solid mix(@brand-primary, black, 85%);
+      padding: 8px 5px 8px @navbar-link-space + 3;
+
+      .input-group-btn {
+	      .btn {
+		      background-color: mix(@brand-primary, black, 85%);
+	        color: lighten(@brand-primary, 13%) !important;
+	      }
+      }      
+      .form-control {
+        background-color: mix(@brand-primary, black, 85%);
+        color: @inverse;
+        .placeholder(lighten(@brand-primary, 33%));
+      }
+      .form-control:focus {
+        border-color: @brand-secondary;
+      }
+      &.focus {
+	      .input-group-btn {
+		      .btn {
+			      background-color: mix(@brand-primary, black, 85%) !important;
+		      }
+				}  
+      }
+    }
+  }
+
+  // Default navbar search box styling
+  .navbar-form {
+    margin: 0;
+    padding: 20px (@navbar-link-space - 15) 19px @navbar-link-space;
+    max-width: 229px;
+
+		.form-group {
+			margin-bottom: 0;
+		}
+    .form-control {
+      background-color: @inverse;
+      border: 2px solid transparent;
+      color: mix(@brand-primary, white, 85%);
+      .placeholder(mix(@brand-primary, white, 66%));
+      font-size: @component-font-size-base; // ~15px
+    }
+    .form-control:focus {
+      border-color: @brand-secondary;
+    }
+    .input-group-btn .btn {
+	    border-color: transparent;
+	    color: mix(@brand-primary, white, 50%);
+	    font-size: floor(@component-font-size-base * 1.067); // ~16px
+    }
+  }
+}
+
+// Fixed top/bottom
+.navbar.navbar-fixed-bottom,
+.navbar.navbar-fixed-top {
+  .navbar-inner {
+    .navbar-form {
+      .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;
+    }
+  }
+}