flatui3-rails 0.0.1

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

@@ -0,0 +1,231 @@
+//
+// Buttons
+// --------------------------------------------------
+
+// Base styles
+// --------------------------------------------------
+.btn,
+.btn-group > .btn,
+.btn-group > .dropdown-menu,
+.btn-group > .popover {
+  font-size: ceil(@font-size-base * 1.071); // ~15px
+  font-weight: 400;
+}
+
+.btn-block {
+	white-space: normal;
+}
+
+.btn {
+  border: none;
+  background: @lightgray;
+  color: @button-text;
+  padding: 9px 12px 10px;
+  line-height: 22px;
+  text-decoration: none;
+  border-radius: @border-radius-large;
+  .transition(.25s linear);
+  .user-select(none);
+
+  // Alternate states
+  // --------------------------------------------------
+  &:hover,
+  &:focus,
+  .btn-group:focus &.dropdown-toggle {
+    background-color: @button-hover;
+    color: @button-text;
+    outline: none;
+    .transition(.25s);
+  }
+
+  // Active State
+  &:active,
+  .btn-group.open &.dropdown-toggle,
+  &.active {
+    background-color: @button-active;
+    color: fade(@button-text, 75%);
+    .box-shadow(none);
+  }
+
+  // Disabled state
+  &.disabled,
+  &[disabled] {
+    background-color: @lightgray;
+    color: fade(@button-text, 75%);
+    .opacity(.7);
+  }
+
+  // Button sizes
+  // --------------------------------------------------
+
+  // Huge
+  &.btn-hg,
+  .input-group-hg & {
+    font-size: ceil(@font-size-base * 1.57); // ~22px
+    line-height: 22px;
+    padding: 15px 20px 16px;
+
+    > [class^="fui-"] {
+      top: 1px;
+
+      &.pull-right {
+        margin-right: -2px;
+      }
+    }
+  }
+
+  // Large
+  &.btn-lg,
+  .input-group-lg & {
+    font-size: ceil(@font-size-base * 1.214); // ~17px
+    line-height: 20px;
+    padding: 12px 18px 13px;
+
+    > [class^="fui-"] {
+      top: 0;
+
+      &.pull-right {
+        margin-right: -2px;
+      }
+    }
+  }
+
+  // Small
+  &.btn-sm,
+  .input-group-sm & {
+    font-size: ceil(@font-size-base * 0.928); // ~13px
+    line-height: 20px;
+    padding: 6px 13px 8px;
+
+    > [class^="fui-"] {
+      top: 0;
+    }
+  }
+
+  // Extra small
+  &.btn-xs,
+  .input-group-xs & {
+    font-size: ceil(@font-size-base * 0.857); // ~12px
+    padding: 8px 13px 9px;
+    line-height: 1.2;
+
+    > [class^="fui-"] {
+      top: 0;
+    }
+  }
+
+  // Set the backgrounds
+  // -------------------------
+  &.btn-primary {
+    .swap-button-color(@firm, @button-primary-hover, @button-primary-active);
+  }
+  &.btn-info    {
+    .swap-button-color(@info, @button-info-hover, @button-info-active);
+  }
+  &.btn-danger  {
+    .swap-button-color(@danger, @button-danger-hover, @button-danger-active);
+  }
+  &.btn-success {
+    .swap-button-color(@success, @button-success-hover, @button-success-active);
+  }
+  &.btn-warning {
+    .swap-button-color(@warning, @button-warning-hover, @button-warning-active);
+  }
+  &.btn-inverse {
+    .swap-button-color(@base, @button-inverse-hover, @button-inverse-active);    
+  }
+  &.btn-default {
+	  .swap-button-color(@lightgray, @button-hover, @button-active);
+	}
+
+  // Button icon
+  // --------------------------------------------------
+  > [class^="fui-"] {
+    margin: 0 1px;
+    position: relative;
+    top: 1px;
+    vertical-align: top;
+    .inline-block();
+
+    &.pull-right {
+      margin-right: 0;
+    }
+  }
+}
+
+// Other button locations
+// Button with icon inside
+.btn-toolbar .btn {
+  &.active {
+    color: @button-text;
+  }
+  &:first-child {
+    border-radius: @border-radius-large 0 0 @border-radius-large;
+  }
+  &:last-child {
+    border-radius: 0 @border-radius-large @border-radius-large 0;
+  }
+  > [class^="fui-"] {
+    font-size: @icon-normal;
+    top: 0;
+    margin: 0 4px;
+  }
+}
+
+// Button tip
+.btn-tip {
+  font-weight: 300;
+  padding-left: 10px;
+}
+
+// BUTTON GROUP
+// ----------------------
+.btn-group {
+  > .btn {
+    border-radius: 0;
+    text-align: center;
+
+    &:active,
+    &.active {
+      & + .btn {
+        border-left-color: transparent;
+      }
+    }
+    &:first-of-type,
+    &:first-of-type:not(:first-child):not(:last-child):not(.dropdown-toggle) {
+      border-top-left-radius: @border-radius-large;
+      border-bottom-left-radius: @border-radius-large;
+    }
+    &:last-of-type,
+    &:last-of-type:not(:first-child):not(:last-child):not(.dropdown-toggle)   {
+      border-top-right-radius: @border-radius-large;
+      border-bottom-right-radius: @border-radius-large;
+    }
+    & + .btn {
+      margin-left: 0;
+    }
+    & + .dropdown-toggle {
+      border-left: 2px solid fade(@base, 15%);
+      padding-left: 13px;
+      padding-right: 13px;
+      .box-shadow(none);
+
+      .caret {
+        margin-left: 3px;
+        margin-right: 3px;
+      }
+    }
+    &.btn-gh + .dropdown-toggle {
+      .caret {
+        margin-left: 7px;
+        margin-right: 7px;
+      }
+    }
+    &.btn-sm + .dropdown-toggle {
+      .caret {
+        margin-left: 0;
+        margin-right: 0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,31 @@
+//
+// Caret
+// --------------------------------------------------
+
+.caret {
+  border-width: 8px 6px;
+  border-bottom-color: @base;  
+  border-top-color: @base;
+  border-style: solid;
+  border-bottom-style: none;
+  .transition(.25s);
+  .transform(scale(1.001));
+}
+
+.caret(@color: @base) {
+  border-bottom-color: @color;
+  border-top-color: @color;
+}
+
+.dropup .caret,
+.dropup .btn-lg .caret,
+.navbar-fixed-bottom .dropdown .caret {
+  border-bottom-width: 8px;
+}
+
+.btn-lg .caret {
+  border-top-width: 8px;
+  border-right-width: 6px;
+  border-left-width: 6px;
+}
+

data/vendor/toolkit/flat-ui/modules/checkbox-and-radio.less

@@ -0,0 +1,104 @@
+//
+// Checkbox & Radio
+// --------------------------------------------------
+
+.checkbox,
+.radio {
+  margin-bottom: 12px;
+  padding-left: 32px;
+  position: relative;
+  .transition(color .25s linear);
+  
+  input {
+    outline: none !important;
+    display: none;
+  }
+
+  // Replace icons
+  // --------------------------------------------------
+  .icons {
+    color: @lightgray;
+    display: block;
+    height: 20px;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 20px;
+    text-align: center;
+    line-height: 21px;
+    font-size: 20px;
+    cursor: pointer;
+    .transition(color .25s linear);
+
+    .first-icon,
+    .second-icon {
+    	display: inline-table;
+      position: absolute;
+      left: 0;
+      top: 0;
+      background-color: @inverse;
+      .opacity(1);
+    }
+    .second-icon {
+      .opacity(0);
+    }
+  }
+
+  // Alternate States
+  // --------------------------------------------------
+
+  // Hover State
+  &:hover {
+  	color: @lightgray;
+  	.transition(color .25s linear);
+  	
+    .first-icon {
+      .opacity(0);
+    }
+    .second-icon {
+      .opacity(1);
+    }
+  }
+
+  // Checked State
+  &.checked {
+    color: @link-color;
+
+    .first-icon {
+      .opacity(0);
+    }
+    .second-icon {
+    	color: @link-color;
+    	.transition(color .25s linear);
+      .opacity(1);
+    }
+  }
+
+  // Disabled state
+  &.disabled {
+    cursor: default;
+    color: mix(@lightgray, white, 38%);
+
+    .icons {
+      color: mix(@lightgray, white, 38%);
+    }
+    .first-icon {
+      .opacity(1);
+    }
+    .second-icon {
+      .opacity(0);
+    }
+    &.checked {
+      .icons {
+        color: mix(@lightgray, white, 38%);
+      }
+      .first-icon {
+        .opacity(0);
+      }
+      .second-icon {
+      	color: mix(@lightgray, white, 38%);
+        .opacity(1);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,225 @@
+//
+// Dropdown
+// --------------------------------------------------
+
+.dropdown-menu {
+  background-color: @dropdown-background;
+  border: none;
+  display: block;
+  margin-top: 8px;
+  opacity: 0;
+  padding: 0;
+  visibility: hidden;
+  width: 100%;
+  .box-shadow(none);
+  .transition(.25s);
+  
+  &.typeahead {
+    display: none;
+    opacity: 1;
+    visibility: visible;
+    width: auto;
+    margin-top: 2px;
+  }
+
+  // Opened state
+  .open > & {
+    margin-top: 18px;
+    opacity: 1;
+    visibility: visible;
+  }
+  li {
+    &:first-child {
+      dt + a {
+        border-radius: 0;
+      }
+      > a {
+        border-radius: 6px 6px 0 0;
+        padding-top: 8px;
+      }
+    }
+
+    &:last-child {
+      > a {
+        border-radius: 0 0 6px 6px;
+        padding-bottom: 10px;
+      }
+    }
+
+    &.active,
+    &.selected {
+      > a,
+      > a.highlighted {
+        background: @firm;
+        color: @inverse;
+
+        &:hover,
+        &:focus {
+          background: mix(@firm, black, 85%);
+          color: @inverse;
+        }
+      }
+    }
+    > a {
+      color: fade(@base, 75%);
+      padding: 6px 15px 8px;
+      text-decoration: none;
+      .clearfix();
+      .transition(background-color 0.25s);
+
+      &:hover,
+      &:active,
+      &:focus {
+        background: mix(@inverse, @base, 85%);
+        color: inherit;
+        outline: none;
+      }
+
+      &.highlighted {
+        background: mix(@inverse, @base, 73.5%);
+        color: @inverse;
+        
+        &:hover,
+        &:focus {
+          background: mix(@inverse, @base, 66%);
+          color: @inverse;
+        }
+      }
+
+      &:before {
+        float: right;
+        margin-top: 3px;
+      }
+    }
+
+    // Submenu title
+    dt {
+      font-weight: 300;
+      margin-bottom: 3px;
+      margin-top: 12px;
+      padding: 0 15px;
+    }
+  }
+}
+
+// Dropdown expands to top
+.dropup,
+.navbar-fixed-bottom .dropdown {
+  .dropdown-menu {
+    margin-bottom: 8px;
+  }
+  .dropdown-arrow {
+    border-bottom: none;
+    border-top: 8px outset mix(@inverse, @base, 94%);
+    bottom: 100%;
+    top: auto;
+  }
+}
+
+// Second level nav
+.navbar-fixed-bottom .nav > li > ul:before {
+  border-bottom: none;
+  border-top: 9px outset @base;
+  bottom: 4px;
+  top: auto;
+}
+
+.open {
+  &.dropup {
+    > .dropdown-menu {
+      margin-bottom: 18px;
+    }
+    > .dropdown-arrow {
+      margin-bottom: 10px;
+
+      &.dropdown-arrow-inverse {
+        border-top-color: @base;
+      }
+    }
+  }
+  > .dropdown-arrow {
+    margin-top: 9px;
+    opacity: 1;
+  }
+}
+
+// Arrows
+// --------------------------------------------------
+.dropdown-arrow {
+  border-style: solid;
+  border-width: 0 9px 9px 9px;
+  border-color: transparent transparent mix(@inverse, @base, 94%) transparent;
+  height: 0;
+  margin-top: 0;
+  opacity: 0;
+  position: absolute;
+  right: 13px;
+  top: 100%;
+  width: 0;
+  z-index: 10;  
+  -webkit-transform: rotate(360deg); // Make corners smooth
+  .transition(.25s);
+}
+
+// Alternate Color
+// --------------------------------------------------
+.dropdown-inverse {
+  background-color: @base;
+  color: mix(@inverse, black, 80%);
+  padding: 4px 0 6px;
+
+  li {
+    margin: 0 4px -2px;
+    &:first-child,
+    &:last-child {
+      > a {
+        border-radius: 2px;
+        padding-bottom: 7px;
+        padding-top: 5px;
+      }
+      dt + a {
+        border-radius: 2px;
+      }
+    }
+
+    &.active,
+    &.selected {
+      > a {
+        background: @firm;
+        color: @inverse;
+        position: relative;
+        z-index: 1;
+      }
+    }
+    dt {
+      padding-left: 11px;
+      padding-right: 11px;
+    }
+    .divider {
+      margin-left: 11px;
+      margin-right: 11px;
+    }
+    > a {
+      border-radius: 2px;
+      color: @inverse;
+      padding: 5px 11px 7px;
+
+      &:hover,
+      &:active,
+      &:focus {
+        background: mix(@base, black, 85%);
+      }
+      &.highlighted {
+        background: mix(@base, @inverse, 85%);
+        &:hover,
+        &:focus {
+          background: mix(@base, @inverse, 75%);
+        }
+      }
+    }
+    .divider {
+      background-color: mix(@base, white, 85%);
+      border-bottom-color: mix(@base, white, 85%);
+    }
+  }
+}