flatui-rails-less 1.0

data/vendor/assets/stylesheets/modules/button-groups.less

@@ -0,0 +1,110 @@
+//
+// Button groups
+// --------------------------------------------------
+
+// Button carets
+//
+// Match the button text color to the arrow/caret for indicating dropdown-ness.
+
+.caret {
+  .btn-default & {
+    border-top-color: @btn-default-color;
+  }
+  .btn-primary &,
+  .btn-success &,
+  .btn-warning &,
+  .btn-danger &,
+  .btn-info & {
+    border-top-color: @inverse;
+  }
+}
+.dropup {
+  & .btn-default .caret {
+    border-bottom-color: @btn-default-color;
+  }
+  .btn-primary,
+  .btn-success,
+  .btn-warning,
+  .btn-danger,
+  .btn-info {
+   .caret {
+      border-bottom-color: @inverse;
+    }
+  }
+}
+
+// Sizing
+//
+// Remix the default button sizing classes into new ones for easier manipulation.
+
+.btn-group-xs > .btn { .btn-xs(); }
+.btn-group-sm > .btn { .btn-sm(); }
+.btn-group-lg > .btn { .btn-lg(); }
+.btn-group-gh > .btn { .btn-hg(); }
+
+
+.btn-group {
+  > .btn {
+    & + .btn {
+      margin-left: 0;
+    }
+    & + .dropdown-toggle {
+      border-left: 2px solid fade(@brand-primary, 15%);
+      padding-left: 12px;
+      padding-right: 12px;
+
+      .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;
+      }
+    }
+  }
+}
+
+.dropdown-toggle {
+	.caret {
+		margin-left: 8px;
+	}
+}
+
+.btn-group > .btn,
+.btn-group > .dropdown-menu,
+.btn-group > .popover {
+  font-weight: 400;
+}
+
+.btn-group:focus .dropdown-toggle {
+  outline: none;
+  .transition(.25s);
+}
+
+// The clickable button for toggling the menu
+// Remove the gradient and set the same inset shadow as the :active state
+.btn-group.open .dropdown-toggle {
+  color: fade(@btn-default-color, 75%);
+  .box-shadow(none);
+}
+
+// Other button locations
+// Button with icon inside
+.btn-toolbar .btn {
+  &.active {
+    color: @btn-default-color;
+  }
+  > [class^="fui-"] {
+    font-size: @icon-normal;
+    margin: 0 1px;
+  }
+}

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

@@ -0,0 +1,145 @@
+//
+// Buttons
+// --------------------------------------------------
+
+// Base styles
+// --------------------------------------------------
+.btn {
+  border: none;
+  font-size: @btn-font-size-base;
+  font-weight: @btn-font-weight;
+  line-height: @btn-line-height-base;
+  border-radius: @border-radius-base;
+  padding: 10px 15px;
+  -webkit-font-smoothing: subpixel-antialiased;
+  .transition(.25s linear);
+
+  &:hover,
+  &:focus {
+    color: @btn-default-color;    
+  }
+
+  &:active,
+  &.active {
+  	outline: none;
+    .box-shadow(none);
+  }
+
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    background-color: @btn-link-disabled-color;
+    color: fade(@btn-default-color, 75%);
+    .opacity(.7);
+  }
+
+  // Button icons
+  // --------------------------------------------------
+  > [class^="fui-"] {
+    margin: 0 1px;
+    position: relative;
+    line-height: 1;
+    top: 1px;
+    
+    .btn-xs& {
+			font-size: 11px;
+			top: 0;
+		}
+		.btn-hg& {
+			top: 2px;
+		} 
+  }  
+}
+
+// Alternate buttons
+// --------------------------------------------------
+.btn-default {
+  .button-variant(@btn-default-color, @gray-light, @btn-hover-bg, @btn-active-bg);
+}
+.btn-primary {
+  .button-variant(@btn-default-color, @brand-secondary, @btn-primary-hover-bg, @btn-primary-active-bg);
+}
+.btn-info    {
+  .button-variant(@btn-default-color, @brand-info, @btn-info-hover-bg, @btn-info-active-bg);
+}
+.btn-danger  {
+  .button-variant(@btn-default-color, @brand-danger, @btn-danger-hover-bg, @btn-danger-active-bg);
+}
+.btn-success {
+  .button-variant(@btn-default-color, @brand-success, @btn-success-hover-bg, @btn-success-active-bg);
+}
+.btn-warning {
+  .button-variant(@btn-default-color, @brand-warning, @btn-warning-hover-bg, @btn-warning-active-bg);
+}
+.btn-inverse {
+  .button-variant(@btn-default-color, @brand-primary, @btn-inverse-hover-bg, @btn-inverse-active-bg);    
+}
+.btn-embossed {
+  .box-shadow(inset 0 -2px 0 fade(black, 15%));
+  
+  &.active,
+  &:active {
+    .box-shadow(inset 0 2px 0 fade(black, 15%));
+  }
+}
+.btn-wide {
+  min-width: 140px;
+  padding-left: 30px;
+  padding-right: 30px;
+}
+  
+ 
+// Link buttons
+// -------------------------
+
+// Make a button look and behave like a link
+.btn-link {
+  color: @link-color;
+
+  &:hover,
+  &:focus {
+    color: @link-hover-color;
+    text-decoration: underline;
+    background-color: transparent;
+  }
+  &[disabled],
+  fieldset[disabled] & {
+    &:hover,
+    &:focus {
+      color: @btn-link-disabled-color;
+      text-decoration: none;
+    }
+  }
+} 
+  
+
+// Button sizes
+// --------------------------------------------------
+
+.btn-hg {
+	.button-size(13px, 20px, @btn-font-size-hg, @btn-line-height-hg, @border-radius-large);
+}
+.btn-lg {
+	.button-size(10px, 19px, @btn-font-size-lg, @btn-line-height-lg, @border-radius-large);
+}
+.btn-sm {
+	.button-size(9px, 13px, @btn-font-size-sm, @btn-line-height-sm, @border-radius-base);
+}
+.btn-xs {
+	.button-size(6px, 9px, @btn-font-size-xs, @btn-line-height-xs, @border-radius-small);
+}  
+  
+
+// Button tip
+.btn-tip {
+  font-weight: 300;
+  padding-left: 10px;
+  font-size: 92%;
+}
+
+// Block button
+// --------------------------------------------------
+
+.btn-block {
+	white-space: normal;
+}

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

@@ -0,0 +1,31 @@
+//
+// Caret
+// --------------------------------------------------
+
+.caret {
+  border-width: 8px 6px;
+  border-bottom-color: @brand-primary;  
+  border-top-color: @brand-primary;
+  border-style: solid;
+  border-bottom-style: none;
+  .transition(.25s);
+  .scale(1.001);
+}
+
+.caret(@color: @brand-primary) {
+  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/assets/stylesheets/modules/checkbox-and-radio.less

@@ -0,0 +1,143 @@
+//
+// Checkbox & Radio
+// --------------------------------------------------
+
+.checkbox,
+.radio {
+  margin-bottom: 12px;
+  padding-left: 32px;
+  position: relative;
+  .transition(color .25s linear);
+  font-size: ceil(@component-font-size-base * 0.933); // ~14px
+  line-height: 1.5; // 21px;
+  
+  input {
+    outline: none !important;
+    display: none;
+  }
+
+  // Replace icons
+  // --------------------------------------------------
+  .icons {
+    color: @gray-light;
+    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;
+      margin: 0;
+      .opacity(1);
+    }
+    .second-icon {
+      .opacity(0);
+    }
+  }
+
+  // Alternate States
+  // --------------------------------------------------
+
+  // Hover State
+  &:hover {
+   .transition(color .25s linear);
+
+    .first-icon {
+      .opacity(0);
+    }
+    .second-icon {
+      .opacity(1);
+    }
+  }
+
+  // Checked State
+  &.checked {
+    color: @brand-secondary;
+
+    .first-icon {
+      .opacity(0);
+    }
+    .second-icon {
+      .opacity(1);
+      color: @brand-secondary;
+     .transition(color .25s linear);
+    }
+  }
+
+  // Disabled state
+  &.disabled {
+    cursor: default;
+    color: mix(@gray-light, white, 38%);
+
+    .icons {
+      color: mix(@gray-light, white, 38%);
+    }
+    .first-icon {
+      .opacity(1);
+    }
+    .second-icon {
+      .opacity(0);
+    }
+    &.checked {
+      .icons {
+        color: mix(@gray-light, white, 38%);
+      }
+      .first-icon {
+        .opacity(0);
+      }
+      .second-icon {
+        .opacity(1);
+        color: mix(@gray-light, white, 38%);
+      }
+    }
+  }
+
+  // Alternate Color
+  // --------------------------------------------------
+
+  // Primary
+  &.primary {
+    .icons {
+      color: @brand-primary;
+    }
+    // Checked State
+    &.checked {
+      color: @brand-secondary;
+
+      .icons {
+        color: @brand-secondary;
+      }
+    }
+    // Disabled state
+    &.disabled {
+      cursor: default;
+      color: @gray-light;
+
+      .icons {
+        color: @gray-light;
+      }
+      &.checked {
+        .icons {
+          color: @gray-light;
+        }
+      }
+    }
+  }
+}
+
+.radio + .radio,
+.checkbox + .checkbox {
+	margin-top: 10px;
+}

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

@@ -0,0 +1,38 @@
+//
+// Code (inline and blocK)
+// --------------------------------------------------
+
+
+// Inline and block code styles
+code,
+kdb,
+pre,
+samp {
+  font-family: @font-family-monospace;
+}
+
+// Inline code
+code {
+  font-size: 75%;
+  color: @code-color;
+  background-color: @code-bg;
+  border-radius: @border-radius-base;
+}
+
+// Blocks of code
+pre {
+  padding: ((@line-height-computed - 6) / 3);
+  margin: 0 0 (@line-height-computed / 2);
+  font-size: (@font-size-base - 5); // 18px to 13px
+  line-height: @line-height-base;
+  color: @pre-color;
+  background-color: @pre-bg;
+  border: 2px solid @pre-border-color;
+  border-radius: @pre-border-radius;
+  white-space: pre;
+}
+
+// Enable scrollable blocks of code
+.pre-scrollable {
+  max-height: @pre-scrollable-max-height;
+}