flatui-rails-less 1.0

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

@@ -0,0 +1,44 @@
+//
+// Sharing box
+// --------------------------------------------------
+
+// Module color variable
+@share-color: mix(@brand-primary, @inverse, 8%);
+
+.share {
+  background-color: @share-color;
+  position: relative;
+  border-radius: @border-radius-large;
+  .dropdown-arrow(@share-color, -9px, 23px);  
+
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 15px;
+  }
+  li {
+  	font-size: @component-font-size-base;
+  	line-height: 1.4;
+    padding-top: 11px;
+    .clearfix();
+    
+    &:first-child {
+      padding-top: 0;
+    }  
+  }
+  .toggle {
+    float: right;
+    margin: 0;
+  }
+  .btn {
+    border-radius: 0 0 @border-radius-large @border-radius-large;
+  }  
+}    
+
+.share-label {
+  float: left;
+  font-size: 15px;
+  line-height: 1.4;
+  padding-top: 5px;
+  width: 50%;
+}

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

@@ -0,0 +1,150 @@
+/* ============================================================
+ * bootstrapSwitch v1.3 by Larentis Mattia @spiritualGuru
+ * http://www.larentis.eu/switch/
+ * ============================================================
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * ============================================================ */
+
+.has-switch {
+  border-radius: @switch-border-radius;
+  display: inline-block;
+  cursor: pointer;
+  line-height: @line-height-base;
+  overflow: hidden;
+  position: relative;
+  text-align: left;
+  width: @switch-width;
+  .mask(~"url('../images/switch/mask.png') 0 0 no-repeat");
+  .user-select(none);
+
+  &.deactivate {
+    .opacity(.5);
+    cursor: default !important;
+    
+    label,
+    span {
+      cursor: default !important;
+    }
+  }
+
+  > div {
+    width: 130px;
+    position: relative;
+    top: 0;
+
+    &.switch-animate {
+      .transition(left .25s ease-out);
+    }
+
+    &.switch-off {
+      left: -50px;
+
+      label {
+        background-color: mix(@brand-primary, white, 63%);
+        border-color: @gray-light;
+        .box-shadow(-1px 0 0 fade(@inverse, 50%));
+      }
+    }
+
+    &.switch-on {
+      left: 0;
+
+      label {
+        background-color: @brand-secondary;
+      }
+    }
+  }
+
+  input[type=checkbox] {
+    display: none;
+  }
+
+  span {
+    cursor: pointer;
+    font-size: @component-font-size-base; // 15px
+    font-weight: 700;
+    float: left;
+    height: 29px;
+    line-height: 19px;
+    margin: 0;
+    padding-bottom: 6px;
+    padding-top: 5px;
+    position: relative;
+    text-align: center;
+    width: 50%;
+    z-index: 1;
+    .transition(.25s ease-out);
+
+    &.switch-left {
+      border-radius: @switch-border-radius 0 0 @switch-border-radius;
+      background-color: @brand-primary;
+      color: @brand-secondary;
+      border-left: 1px solid transparent;
+    }
+
+    &.switch-right {
+      border-radius: 0 @switch-border-radius @switch-border-radius 0;
+      background-color: @gray-light;
+      color: @inverse;
+      text-indent: 7px;
+
+      [class*="fui-"] {
+        text-indent: 0;
+      }
+    }
+  }
+
+  label {
+    border: 4px solid @brand-primary;
+    border-radius: 50%;
+    float: left;
+    height: 29px;
+    margin: 0 -15px;
+    padding: 0;
+    position: relative;
+    vertical-align: middle;
+    width: 29px;
+    z-index: 100;
+    .transition(.25s ease-out);
+  }
+}
+
+// Square Switch
+// -------------------------------
+.switch-square {
+  border-radius: @border-radius-large;
+  .mask(~"url('../images/switch/mask.png') 0 0 no-repeat");
+
+  > div {
+    &.switch-off {
+      label {
+        border-color: mix(@brand-primary, white, 63%);
+        border-radius: @border-radius-large 0 0 @border-radius-large;
+      }
+    }
+  }
+
+  span {
+    &.switch-left {
+      border-radius: @border-radius-large 0 0 @border-radius-large;
+      
+      [class*="fui-"] {
+        text-indent: -10px;
+      }
+    }
+
+    &.switch-right {
+      border-radius: 0 @border-radius-large @border-radius-large 0;
+      
+      [class*="fui-"] {
+        text-indent: 5px;
+      }
+    }
+  }
+
+  label {
+    border-radius: 0 @border-radius-large @border-radius-large 0;
+    border-color: @brand-secondary;
+  }
+}

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

@@ -0,0 +1,121 @@
+//
+// Tags Input
+// --------------------------------------------------
+
+.tagsinput {
+  background: white;
+  border: 2px solid @brand-secondary;
+  border-radius: @border-radius-large;
+  height: 100px;
+  margin-bottom: 18px;
+  padding: 6px 1px 1px 6px;
+  overflow-y: auto;
+  text-align: left;
+
+  .tag {  	
+    border-radius: @border-radius-base;
+    background-color: @brand-secondary;
+    color: @inverse;
+    font-size: ceil(@component-font-size-base * 0.933); // ~14px
+    cursor: pointer;
+    display: inline-block;
+    margin-right: 5px;
+    margin-bottom: 5px;
+    overflow: hidden;
+    line-height: 15px;
+    padding: 6px 13px 8px 19px;
+    position: relative;
+    vertical-align: middle;
+    .transition(.25s linear);
+
+    &:hover {
+      background-color: mix(@brand-secondary, black, 85%);
+      color: @inverse;
+      padding-left: 12px;
+      padding-right: 20px;
+      
+      .tagsinput-remove-link {
+        color: @inverse;
+        opacity: 1;
+        // Opacity fallback for IE
+        display: block\9;
+      }
+    }
+  }
+
+  input {
+    background: transparent;
+    border: none;
+    color: @brand-primary;
+    font-family: @font-family-base;
+    font-size: ceil(@component-font-size-base * 0.933); // ~14px
+    margin: 0px;
+    padding: 0 0 0 5px;
+    outline: none !important;
+    margin: 6px 5px 0 0;
+    vertical-align: top;
+    width: 12px;
+  }
+}
+
+.tagsinput-remove-link {
+  bottom: 0;
+  color: @inverse;
+  cursor: pointer;
+  font-size: 12px;
+  opacity: 0;
+  padding: 7px 7px 5px 0;
+  position: absolute;
+  right: 0;
+  text-align: right;
+  text-decoration: none;
+  top: 0;
+  width: 100%;
+  z-index: 2;
+  // Opacity fallback for IE
+  display: none\9;
+  
+  &:before {
+    color: @inverse;
+    content: "\e00b";
+    font-family: "Flat-UI-Icons";
+  }
+}
+
+.tagsinput-add-container {
+  vertical-align: middle;
+  display: inline-block;
+}
+
+.tagsinput-add {	
+  background-color: mix(@inverse, @brand-primary, 80%);
+  border-radius: @border-radius-small;
+  color: @inverse;
+  cursor: pointer;
+  display: inline-block;
+  font-size: ceil(@component-font-size-base * 0.933); // ~14px
+  line-height: 1;
+  margin-bottom: 5px;
+  padding: 7px 9px;
+  vertical-align: top;
+  .transition(.25s linear);
+  
+  &:hover {
+    background-color: @brand-secondary;
+  }
+  &:before {
+    content: "\e009";
+    font-family: "Flat-UI-Icons";
+  }
+}
+
+.tags_clear {
+  clear: both;
+  width: 100%;
+  height: 0px;
+}
+.not_valid {
+  background: #fbd8db !important;
+  color: #90111a !important;
+  margin-left: 5px !important;
+}

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

@@ -0,0 +1,54 @@
+//
+// Tile
+// -------------------------------------------------
+
+.tile {
+  background-color: mix(@brand-primary, @inverse, 8%);
+  border-radius: @border-radius-large;
+  padding: 14px;
+  position: relative;
+  text-align: center;
+
+  &.tile-hot {
+    &:before {
+      background: ~"url(../images/tile/ribbon.png) 0 0 no-repeat";
+      background-size: 82px 82px;
+      content: '';
+      height: 82px;
+      position: absolute;
+      right: -4px;
+      top: -4px;
+      width: 82px;
+    }  
+  }
+  p {
+    font-size: 15px;
+    margin-bottom: 33px;
+  }  
+}
+.tile-image {
+  height: 100px;
+  margin: 31px 0 27px;
+  vertical-align: bottom;
+  
+  &.big-illustration {
+    height: 111px;
+    margin-top: 20px;
+    width: 112px;
+  }
+}
+.tile-title {
+  font-size: 20px;
+  margin: 0;
+}
+
+// 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) {
+  .tile {
+    &.tile-hot {
+      &:before {
+        background-image: ~"url(../images/tile/ribbon-2x.png)";
+      }  
+    }    
+  }      
+}

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

@@ -0,0 +1,110 @@
+//
+// Todo list
+// --------------------------------------------------
+
+.todo {  
+  color: mix(@brand-primary, @inverse, 66%);
+  margin-bottom: 20px;
+  border-radius: @border-radius-large;
+
+  ul {
+  	background-color: mix(@brand-primary, black, 85%);
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    border-radius: 0 0 @border-radius-large @border-radius-large;
+  }
+  li {
+    background: @brand-primary ~"url(../images/todo/todo.png) 92% center no-repeat";
+    background-size: 20px 20px;
+    cursor: pointer;
+    font-size: ceil(@component-font-size-base * 0.933); // ~14px
+    line-height: 1.214;
+    margin-top: 2px;
+    padding: 18px 42px 21px 25px;
+    position: relative;
+    .transition(.25s);
+    
+    &:first-child {
+      margin-top: 0;
+    }  
+    &:last-child {
+      border-radius: 0 0 @border-radius-large @border-radius-large;
+      padding-bottom: 21px;
+    }
+    &.todo-done {
+      background: transparent ~"url(../images/todo/done.png) 92% center no-repeat";
+      background-size: 20px 20px;
+      color: @brand-secondary;
+
+      .todo-name {
+        color: @brand-secondary;
+      }  
+    }  
+  }      
+}
+
+.todo-search {
+  position: relative;
+  background: @brand-secondary;
+  background-size: 16px 16px;
+  border-radius: @border-radius-large @border-radius-large 0 0;
+  color: @brand-primary;
+  padding: 19px 25px 20px;
+  
+  &:before {
+    position: absolute;
+    font-family: 'Flat-UI-Icons';
+    content: "\e01c";
+    font-size: 16px;
+    line-height: 17px;
+    display: inline-block;
+    top: 50%;
+    left: 92%;
+    margin: -0.5em 0 0 -1em;
+  }
+}
+
+input.todo-search-field {
+  background: none;
+  border: none;
+  color: @brand-primary;
+  font-size: 19px;
+  font-weight: 700;
+  margin: 0;
+  line-height: 23px;
+  padding: 5px 0;
+  text-indent: 0;
+  .box-shadow(none);
+  .placeholder(@brand-primary);
+}
+
+.todo-icon {
+  float: left;
+  font-size: 24px;
+  padding: 11px 22px 0 0;
+}
+
+.todo-content {
+  padding-top: 1px;
+  overflow: hidden;
+}
+
+.todo-name {
+  color: @inverse;
+  font-size: 17px;
+  margin: 1px 0 3px;
+}  
+
+// 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) {
+  .todo {
+    li {
+      background-image: ~"url(../images/todo/todo-2x.png)";
+      
+      &.todo-done {
+        background-image: ~"url(../images/todo/done-2x.png)";
+      }  
+    }    
+  }  
+}