flatui3-rails 0.0.1

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

@@ -0,0 +1,49 @@
+//
+// Pager
+// --------------------------------------------------
+
+.pager {
+  background-color: @base;
+  border-radius: @border-radius-large;
+  color: @inverse;
+  font-size: 16px;
+  font-weight: 700;
+  .inline-block();
+
+  li {
+    &:first-child {
+      > a,
+      > span {
+        border-left: none;
+        border-radius: @border-radius-large 0 0 @border-radius-large;
+      }
+    }
+
+    > a,
+    > span {
+      background: none;
+      border: none;
+      border-left: 2px solid mix(@base, black, 85%);
+      color: @inverse;
+      padding: @pager-padding;
+      text-decoration: none;
+      white-space: nowrap;
+      border-radius: 0 @border-radius-large @border-radius-large 0;
+
+      &:hover, &:focus {
+        background-color: mix(@base, black, 85%);
+      }
+      &:active {
+        background-color: mix(@base, black, 85%);
+      }
+
+      // Add some spacing between the icon and text
+      [class*="fui-"] + span {
+        margin-left: 8px;
+      }
+      span + [class*="fui-"] {
+        margin-left: 8px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,153 @@
+//
+// Pagination
+// --------------------------------------------------
+
+.pagination {
+  position: relative;
+
+  ul {
+    background: @pagination-color;
+    color: @inverse;
+    padding: 0;
+    margin: 0;
+    display: inline-block;
+    border-radius: @border-radius-large;
+
+    li {
+      display: inline-block;
+      margin-right: -3px;
+      vertical-align: middle;
+
+      // Pseudos and states
+      &:first-child {
+        border-radius: @border-radius-large 0 0 @border-radius-large;
+        
+        &.previous + li {
+          > a,
+          > span {
+            border-left-width: 5px;
+          }
+        }
+      }
+      &:last-child {
+        border-radius: 0 @border-radius-large @border-radius-large 0;
+        margin-right: 0;
+      }
+      &.previous,
+      &.next {
+        > a,
+        > span {
+          background: transparent;
+          border: none;
+          border-right: 2px solid mix(@pagination-color, white, 66%);
+          font-size: ceil(@font-size-base * 1.142); // ~16px
+          margin: 0 9px 0 0;
+          padding: 12px 17px;
+          border-radius: @border-radius-large 0 0 @border-radius-large;
+
+          &,
+          &:hover,
+          &:focus {
+            border-color: mix(@pagination-color, white, 66%) !important;
+          }
+
+          @media (max-width: 480px) {
+            & {
+              margin-right: 0;
+            }
+          }
+        }
+      }
+      &.next {
+        margin-left: 9px;
+
+        > a,
+        > span {
+          border-left: 2px solid mix(@pagination-color, white, 66%);
+          border-right: none;
+          margin: 0;
+          border-radius: 0 @border-radius-large @border-radius-large 0;
+        }
+      }
+      &.active {
+        > a,
+        > span {
+          background-color: @inverse;
+          border-color: @inverse;
+          border-width: 2px !important;
+          color: @pagination-color;
+          margin: 10px 5px 9px;
+
+          &:hover,
+          &:focus {
+            background-color: @inverse;
+            border-color: @inverse;
+            color: @pagination-color;
+          }
+        }
+        &.previous,
+        &.next {
+          border-color: mix(@pagination-color, white, 66%);
+        }
+        &.previous {
+          margin-right: 6px;
+        }
+      }
+
+      // Link
+      > a,
+      > span {
+      	display: inline-block;
+        background: @inverse;
+        border: 5px solid @pagination-color;
+        color: @inverse;
+        line-height: 16px;
+        margin: 7px 2px 6px;
+        min-width: 0;
+        min-height: 16px;
+        padding: 0 4px;
+        border-radius: 50px;        
+        .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: mix(@firm, black, 85%);
+          border-color: mix(@firm, black, 85%);
+        }
+      }
+    }
+  }
+
+  // Navigation buttons
+  > .btn {
+    &.previous,
+    &.next {
+      margin-right: 8px;
+      font-size: @font-size-base;
+      padding-left: 23px;
+      padding-right: 23px;
+      
+      [class*="fui-"] {
+        font-size: @icon-normal;
+        margin-left: -2px;
+        margin-top: -2px;
+      }
+    }
+
+    &.next {
+      margin-left: 8px;
+      margin-right: 0;
+      
+      [class*="fui-"] {
+        margin-right: -2px;
+        margin-left: 4px;
+      }
+    }
+  } 
+}

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

@@ -0,0 +1,64 @@
+//
+// Palette
+// --------------------------------------------------
+
+.pallete-item {
+	width: 140px;
+	float: left;
+	margin: 0 0 20px 20px;
+}
+.palette {
+  color: @inverse;
+  margin: 0;
+  padding: 15px;
+  text-transform: uppercase;
+
+  dt {
+    display: block;
+    font-weight: bold;
+    .opacity(.8);
+  }
+  dd {
+    font-weight: 200;
+    margin-left: 0;
+    .opacity(.8);
+  }  
+}
+
+//
+// Pallet grid
+// --------------------------------------------------
+.calc-color(~"turquoise", ~"green-sea");
+.calc-color(~"emerald", ~"nephritis");
+.calc-color(~"peter-river", ~"belize-hole");
+.calc-color(~"amethyst", ~"wisteria");
+.calc-color(~"wet-asphalt", ~"midnight-blue");
+
+.calc-color(~"sun-flower", ~"orange");
+.calc-color(~"carrot", ~"pumpkin");
+.calc-color(~"alizarin", ~"pomegranate");
+.calc-color(~"clouds", ~"silver");
+.calc-color(~"concrete", ~"asbestos");
+
+.palette-clouds {
+  color: #bdc3c7;
+}
+
+// Palette paragraph
+.palette-paragraph {
+  color: #7f8c8d;
+  font-size: 12px;
+  line-height: 17px;
+
+  span {
+    color: #bdc3c7;
+  }  
+}
+
+// Headline
+.palette-headline {
+  color: #7f8c8d;
+  font-size: 13px;
+  font-weight: 700;
+  margin-top: -3px;
+}

data/vendor/toolkit/flat-ui/modules/progress-bars.less

@@ -0,0 +1,36 @@
+//
+// Progress bars
+// --------------------------------------------------
+
+// Outer container
+.progress {
+  background: mix(@base, white, 10%);
+  border-radius: 32px;
+  height: @progress-height;
+  .box-shadow(none);
+}
+
+// Bar of progress
+.progress-bar {
+	background: @firm;
+	.box-shadow(none);
+}
+
+// Variations
+// -------------------------
+
+.progress-bar-success {
+	background-color: @success;
+}
+
+.progress-bar-warning {
+	background-color: @warning;
+}
+
+.progress-bar-danger {
+	background-color: @danger;
+}
+
+.progress-bar-info {
+	background-color: @info;
+}

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

@@ -0,0 +1,143 @@
+//
+// Bootstrap Select
+// --------------------------------------------------
+// Credits: Silvio Moreto
+// http://github.com/silviomoreto/bootstrap-select
+
+.select {
+  display: inline-block;
+  margin-bottom: 10px;
+
+  // Select grid
+  &[class*="span"] {
+    [class*="span"] > & {
+      margin-left: 0; // No margin if select is a closest child of the grid
+    }
+    .btn {
+      width: 100%; // Button should take all available space of its parent
+    }
+  }
+
+  // Fluid width. Takes all available space and behaves like a block
+  &.select-block {
+    display: block;
+    float: none;
+    margin-left: 0;
+    width: auto;
+    .clearfix();
+
+    .btn {
+      width: 100%;
+    }
+  }
+  
+  
+  // Button Sizes
+  // --------------------------------------------------
+
+  .btn {
+    width: 220px; // Default select width until .span* is applied
+    
+    // Huge
+    &.btn-hg {
+      .filter-option {
+        left: 20px;
+        right: 40px;
+        top: 16px;
+      }
+      .caret {
+        right: 20px;        
+      }
+    }
+    
+    // Large
+    &.btn-lg {
+      .filter-option {
+        left: 18px;
+        right: 38px;
+        top: 12px;
+      }
+    }
+    
+    // Small
+    &.btn-sm {
+      .filter-option {
+        left: 13px;
+        right: 33px;
+        top: 7px;
+      }
+      .caret {
+        right: 13px;
+      }
+    }
+    
+    // Exstra small
+    &.btn-xs {
+      .filter-option {
+        left: 13px;
+        right: 33px;
+        top: 5px;
+      }
+      .caret {
+        right: 13px;
+      }
+    }
+    .filter-option {
+      height: 26px;
+      left: 13px;
+      overflow: hidden;
+      position: absolute;
+      right: 33px;
+      text-align: left;
+      top: 10px;
+    }
+    .caret {
+      position: absolute;
+      right: 16px;
+      margin-top: 8px;
+    }
+    .dropdown-toggle {
+      border-radius: @border-radius-large;
+    }
+
+    // Dropdown menu
+    .dropdown-menu {
+      min-width: 100%;
+
+      dt {
+        cursor: default;
+        display: block;
+        padding: 3px 20px;
+      }
+      li {
+        &:not(.disabled) > a:hover small {
+          color: fade(@inverse, .4);
+        }
+        > a {
+          min-height: 20px;
+          
+          &.opt {
+            padding-left: 35px;
+          }
+        }
+        small {
+          padding-left: .5em;
+        }
+        > dt small {
+          font-weight: normal;
+        }
+      }
+    }
+
+    // Disabled state
+    > .disabled,
+    .dropdown-menu li.disabled > a {
+      cursor: default;
+    }
+  }
+
+  // Caret
+  .caret {
+    .caret(@inverse);
+  }
+}