flatui-rails-less 1.0

data/vendor/assets/stylesheets/demo.less

@@ -0,0 +1,306 @@
+// Demo Flat UI Free
+
+
+// Loading config with variables (changing them leads to changing a color scheme)
+@import "variables";
+
+// Utility mixins for greater good
+@import "mixins";
+
+.container {
+	max-width: 970px !important;
+}
+
+// For demo purposes only
+.demo-headline {
+  padding: 73px 0 110px;
+  text-align: center;
+}
+.demo-logo {
+	font: 900 90px/100px @font-family-demo;
+  letter-spacing: -2px;
+  margin: 10px 0;
+
+  .logo {
+    background: ~"url(../images/demo/logo-mask.png) center 0 no-repeat";
+    background-size: 236px 181px;
+    height: 181px;
+    margin: 0 auto 26px;
+    overflow: hidden;
+    text-indent: -9999em;
+    width: 236px;
+  }
+  small {
+    color: fadeout(@brand-primary, 70%);
+    display: block;
+    font-size: 22px;
+    font-weight: 700;
+    letter-spacing: 0;
+    padding-top: 5px;
+  }  
+}
+// Panels delimiter
+.demo-row {
+  margin-bottom: 20px;
+  
+  .demo-heading-note,
+  .demo-text-note {
+    display: block;
+    width: 260px;
+    position: absolute;
+    bottom: 10px;
+    left: 0;
+    font-size: 13px;
+    line-height: 13px;
+    color: mix(desaturate(@brand-primary, 25%), white, 34%);
+    font-weight: 400;
+  }
+  .demo-text-note {
+    bottom: auto;
+    top: 10px;
+  }
+  
+  &.typography-row {
+	  .demo-content {
+      float: none;
+      width: auto;    
+      clear: both; 
+    }
+    .demo-type-example {
+	    padding-left: 25%;
+	    margin-bottom: 40px;
+	    position: relative;
+    }
+  }
+}
+.demo-section-title {
+	font: 900 32px/40px @font-family-demo;
+	margin: 10px 0;
+}
+.demo-panel-title {
+  padding-top: 20px;
+  margin: 2px 0 20px;
+  font: bold 23px/40px @font-family-demo;
+
+  small {
+    color: mix(@brand-primary, @inverse, 66%);
+    font-size: inherit;
+    font-weight: 400;
+  }  
+}
+// Shift blocks to fit design
+.demo-navigation {
+  margin-bottom: -4px;
+  margin-top: -10px;
+}
+.demo-pager {
+  margin-top: -20px;
+}
+.demo-tooltips {
+  height: 126px;
+
+  // Needed just for the demo. Don't use it in producion ;)
+  .tooltip {
+    left: -8px !important;
+    position: relative !important;
+    top: -8px !important;
+  }  
+}
+.demo-headings {
+  margin-bottom: 12px;
+}
+.demo-tiles {
+  margin-bottom: 46px
+}
+
+.demo-icons {
+  font-size: 32px;
+  margin-left: -20px;
+  padding-left: 20px;
+
+  .demo-content {
+    margin: 0 0 0 -35px;
+    
+    > span {
+      display: inline-block;
+      margin: 0 0 32px 35px;
+      width: 24px;
+      font-size: 24px;
+    }  
+  }
+}
+
+.demo-icons-tooltip {
+  bottom: 0;
+  color: mix(@brand-primary, @inverse, 30%);
+  font-size: 12px;
+  left: 100%;
+  margin-left: 0 !important;
+  position: absolute;
+  width: 80px;
+}
+
+// Illustration Icons
+// --------------------------------------------------
+.demo-illustrations {
+
+  .demo-content {
+    margin: 0 0 0 -40px;
+    padding-top: 20px;
+    .clearfix();
+
+    > div {
+      float: left;
+      width: 100px;
+      height: 100px;
+      line-height: 100px;
+      margin: 0 0 40px 40px;
+      text-align: center;
+    }
+  }
+  img {
+    display: inline-block;
+    max-height: 100px;
+    max-width: 100px;
+    vertical-align: middle;
+  }
+}
+
+.demo-samples {
+  margin-bottom: 46px;
+}
+.demo-video {  
+  padding-top: 95px;
+  border-radius: @border-radius-large;
+}
+.demo-download-section {
+  float: none;
+  margin: 0 auto;
+  padding: 60px 0 90px 20px;
+  text-align: center;
+
+  [class*='fui-'] {
+    margin: 3px 0 -3px;
+  }  
+}
+.demo-download {
+  background-color: mix(@brand-primary, @inverse, 10%);  
+  height: 190px;
+  margin: 0 auto 32px;
+  padding: 40px 28px 30px 32px;
+  text-align: center;
+  width: 190px;
+  border-radius: 50%;
+
+  img {
+    height: 104px;
+    width: 82px;
+  }  
+}
+.demo-download-text {
+  font-size: 15px;
+  padding: 20px 0;
+  text-align: center;
+}
+.demo-text-box {
+  a:hover {
+    color: @brand-secondary;
+  }  
+}
+.demo-browser {
+  background: mix(@brand-primary, black, 85%) url(../images/demo/browser.png) 0 0 no-repeat;
+  background-size: 659px 42px;  
+  color: @inverse;
+  margin: 0 41px 140px 0;
+  padding-top: 42px;
+  border-radius: 0 0 @border-radius-large @border-radius-large;
+}
+.demo-browser-side {
+  float: left;
+  padding: 22px 20px;
+  width: 151px;
+
+  > h5 {
+  	font-size: 16px;
+  	margin-top: 4px;
+    margin-bottom: 3px;
+    text-transform: none;
+    font-weight: 400;
+  }
+  > h6 {
+    font-size: 11px;
+    font-weight: 300;
+    line-height: 18px;
+    margin-top: 3px;
+    text-transform: none;
+    -webkit-font-smoothing: subpixel-antialiased;
+  }  
+}
+.demo-browser-author {
+  background: ~"url(../images/demo/browser-author.jpg) center center no-repeat";
+  border: 3px solid @inverse;
+  display: block;
+  height: 84px;
+  margin: 0 auto;
+  width: 84px;
+  border-radius: 50%;
+}
+.demo-browser-action {
+  padding: 30px 0 12px;
+
+  > .btn {
+    padding: 7px 0 8px 11px !important;
+    text-align: left;
+    border-radius: @border-radius-small;
+
+    &:before {
+      color: @inverse;
+      content: '\e009';
+      font-size: 16px;
+      font-family: 'Flat-UI-Icons';
+      font-weight: 300;
+      margin-right: 12px;
+      position: relative;
+      top: 1px;
+      -webkit-font-smoothing: antialiased;
+    }  
+  }    
+}
+.demo-browser-content {
+  background-color: @brand-primary;  
+  overflow: hidden;
+  padding: 21px 0 0 20px;
+  border-radius: 0 0 @border-radius-large;
+
+  > img {
+    border: 6px solid @inverse;
+    float: left;
+    margin: 0 15px 20px 0;
+    width: 146px;
+  }  
+}
+// Serving 2x images
+@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 (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2) {
+  .logo {
+    background-image: url(../images/demo/logo-mask-2x.png)
+  }
+  .demo-browser {
+    background-image: url(../images/demo/browser-2x.png)
+  }  
+}
+
+// Shatches
+.demo-swatches-row {
+	[class*="col"] {
+		float: left;		
+		min-height: 1px;
+	}
+	.swatches-col {
+		width: 800px;
+		margin-left: -5px;
+	}
+	.swatches-desc-col {
+		width: 140px;
+		margin-left: 20px;
+	}
+}

data/vendor/assets/stylesheets/docs.less

@@ -0,0 +1,411 @@
+// Flat UI Documentation
+
+
+// Loading config with variables (changing them leads to changing a color scheme)
+@import "variables";
+
+// Utility mixins for greater good
+@import "mixins";
+
+.prettyprint {
+  overflow: auto;
+  
+  &.linenums {
+    overflow: visible;
+    white-space: pre;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+}
+
+// For demo purposes only
+.demo-headline {
+  color: @brand-secondary;
+  font: 700 118px/1.1 @font-family-demo !important;
+  margin-bottom: 50px;
+  margin-top: 2px;
+  padding: 40px 0;
+  text-align: center;
+  word-wrap: break-word;
+}
+
+// Panels delimiter
+.demo-row {
+  margin: 0 auto;
+  padding: 0 20px 50px;
+  width: 940px;
+  .clearfix();
+
+  .demo-heading-note,
+  .demo-text-note {
+    display: block;
+    width: 260px;
+    position: absolute;
+    bottom: 10px;
+    left: 0;
+    font-size: 13px;
+    line-height: 13px;
+    color: mix(desaturate(@brand-primary, 25%), white, 34%);
+    font-weight: 400;
+  }
+  .demo-text-note {
+    bottom: auto;
+    top: 10px;
+  }
+  &.menu-row {
+    padding: 50px 20px 10px;
+  }
+  &.typography-row {
+	  .demo-content {
+      float: none;
+      margin-left: 20px;
+      padding-top: 0;
+      width: auto;    
+      clear: both; 
+    }
+    .demo-type-example {
+	    padding-left: 265px;
+	    margin-bottom: 40px;
+	    position: relative;
+    }
+  }
+}
+
+.demo-col {
+  float: left;
+  margin: 0 20px;
+  width: 270px;
+}
+
+.demo-content {
+  float: left;
+  margin-left: 20px;
+  width: 580px;
+
+  &.demo-content-article {
+    font-size: ceil(@font-size-base * 1.285);
+    p { margin-bottom: 20px; }
+
+    ul {
+      list-style-type: none;
+      margin-left: 0;
+    }
+
+    li {
+      line-height: ceil(@font-size-base * 1.285 * 1.5);
+      padding: 0 0 5px;
+    }
+  }
+}
+
+.demo-content-wide {
+  clear: both;
+  margin: 0 20px;
+  .clearfix();
+}
+
+.demo-title {
+  float: left;
+  margin: -0.5em 20px 0;
+  width: 240px;
+  font: 700 24.5px/40px @font-family-demo;
+
+  h1, h2, h3, h4 {
+    margin-top: 0;
+    font-family: @font-family-demo;
+  }
+  h1, h2, h3 {
+    line-height: 40px !important;
+  }
+  h3 {
+    font-size: 24.5px !important;
+  }
+  small {
+    color: mix(desaturate(@brand-primary, 25%), white, 34%);
+    font-size: 13px;
+    font-weight: 400;
+  }
+}
+
+.demo-buttons .btn,
+.demo-inputs .control-group {
+  margin-bottom: 20px;
+}
+
+.demo-navigation {
+  .demo-title {
+    margin-top: 10px;
+  }
+}
+
+.demo-pager {
+  margin-top: -10px;
+}
+
+.demo-tooltips {
+  height: 100px;
+  // Needed just for the demo. Don't use it in producion ;)
+
+  .tooltip {
+    left: -8px !important;
+    position: relative !important;
+    top: -8px !important;
+  }
+  .tooltip-inner {
+    max-width: 100%;
+    width: auto;
+  }
+}
+
+.demo-popovers {
+  .popover {
+    display: block;
+    margin: 0 13px 0 -3px;
+    position: relative;
+    width: auto;
+  }
+}
+
+.demo-social-buttons {
+  .btn {
+    clear: left;
+    float: left;
+    margin-bottom: 17px;
+  }
+}
+
+.demo-headings {
+  margin-bottom: 12px;
+}
+
+.demo-tiles {
+  margin-bottom: 46px;
+}
+
+.demo-icons {
+  font-size: 32px;
+  margin-left: -15px;
+
+  > span {
+    display: inline-block;
+    margin: 0 0 32px 35px;
+    width: 32px;
+  }
+
+  @media (max-width: 480px) {
+    & {
+      > span {
+        margin-left: 16px;
+        margin-right: 16px;
+      }
+    }
+  }
+}
+
+.demo-icons-tooltip {
+  bottom: 0;
+  color: mix(@brand-primary, white, 30%);
+  font-size: 12px;
+  left: 100%;
+  margin-left: 0 !important;
+  position: absolute;
+  width: 80px;
+}
+
+.demo-inline {
+  display: inline-block;
+}
+
+.demo-labels {
+	font-size: ceil(@font-size-base * 1.357);
+	
+	.visible-lg {
+		display: inline !important;
+		
+		@media (max-width: 767px) {
+			& {
+				display: none !important;
+			}
+		}
+	}	
+}
+
+
+// Illustration Icons
+// --------------------------------------------------
+.demo-illustrations {
+  margin-top: 40px;
+
+  .demo-content-wide {
+    margin: 0 0 0 -66px;
+    padding-top: 20px;
+
+    > div {
+      float: left;
+      width: 100px;
+      height: 100px;
+      line-height: 100px;
+      margin: 0 0 80px 87px;
+      text-align: center;
+      vertical-align: middle;
+    }
+  }
+  img {
+    display: inline-block;
+    max-height: 100px;
+    max-width: 100px;
+    vertical-align: middle;
+  }
+}
+
+// Dialog with form inside
+.demo-dialog {
+  padding: 13px 20px 15px;
+  
+  .flat {
+	  width: 300px;
+  }
+}
+
+// Static Modal
+.static-modal-backdrop {
+  background-color: mix(@brand-primary, black, 70%);
+  padding: 62px 14px;
+  margin-bottom: 50px;
+  width: 100%;
+  
+  .modal {
+  	bottom: auto;
+    display: block;
+    left: auto;
+    position: relative;
+    right: auto;
+    top: auto;
+    z-index: 1;
+    overflow: hidden;
+    padding-bottom: 20px;
+  }
+  .modal-dialog {
+	  padding: 0;
+  }
+}
+
+.components-static-modal {
+	.modal {
+  	bottom: auto;
+    display: block;
+    left: auto;
+    position: relative;
+    right: auto;
+    top: auto;
+    z-index: 1;
+    overflow: visible;
+  }
+  .modal-dialog,
+  .modal-content {
+	  width: auto;
+  }
+  .modal-dialog {
+	  padding: 0;
+  }
+}
+
+// Sidebar for Components navigation
+.demo-sidebar {
+  font-size: floor(@font-size-base * 0.778); // ~14px
+	line-height: 1.214; // ~17px
+  height: 100%;
+  left: 0;
+  margin: 0;
+  list-style-type: none;
+  overflow: auto;
+  position: fixed;
+  top: 0;
+  padding: 0;
+  width: 150px;
+  z-index: 10000;
+  background-color: mix(@brand-primary, white, 6%);
+  -webkit-backface-visibility: hidden;
+  -webkit-font-smoothing: subpixel-antialiased;
+
+  li {
+    &:first-child {
+      a {
+        padding-top: 20px;
+      }
+    }
+  }
+
+  a {
+    display: block;
+    padding: 7px 20px;
+  }
+}
+
+//
+// Responsive: Landscape phone to desktop/tablet
+// --------------------------------------------------
+@media (max-width: 767px) {
+  .demo-row {
+    margin-bottom: 0;
+    margin-left: 0;
+    padding-left: 0;
+    padding-right: 0;
+    width: auto;
+  }
+  .demo-col,
+  .demo-content,
+  .demo-content-wide,
+  .demo-title {
+    float: none;
+    margin: 0 0 18px !important;
+    padding: 0 !important;
+    width: auto;
+  }
+  .demo-headline {
+    font-size: ceil(@font-size-base * 3.611) !important;
+    text-align: left;
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+
+  .demo-inline { display: block; }
+
+  .demo-navigation {
+    .btn-toolbar {
+      margin: 0;
+    }
+
+    .pager {
+      display: block;
+      margin-left: 0 !important;
+      margin-bottom: 20px;
+    }
+  }
+  .typography-row {
+  	.demo-type-example {
+	  	padding-left: 0 !important;
+  	}
+    .demo-heading-note,
+    .demo-text-note {
+      position: static !important;
+      margin: 0 0 10px;
+    }
+  }
+  .demo-illustrations .demo-content-wide > div {
+	  margin-left: 67px;
+  }
+}
+
+@media (max-width: 480px) {
+	.demo-illustrations .demo-content-wide > div {
+		margin-left: 23px;
+	}
+	.demo-navigation {
+		.mll.pvl {
+			padding: 0;
+			margin-left: 0 !important;
+			margin-bottom: 20px;
+		}
+	}
+}