flatui-rails-less 1.0

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

@@ -0,0 +1,56 @@
+// Tooltip
+// --------------------------------------------------
+
+.tooltip {
+  font-size: ceil(@component-font-size-base * 0.933); // ~14px
+  line-height: 1.286; // 18px
+  
+  &.in {
+    opacity: 1;
+  }
+  &.top {
+    padding-bottom: 9px;
+    
+    .tooltip-arrow {
+      border-top-color: @brand-primary;
+      border-width: 9px 9px 0;
+      bottom: 0;
+      margin-left: -9px;
+    }
+  }
+  &.right {
+    .tooltip-arrow {
+      border-right-color: @brand-primary;
+      border-width: 9px 9px 9px 0;
+      margin-top: -9px;
+      left: -3px;
+    }
+  }
+  &.bottom {
+    padding-top: 8px;
+    
+    .tooltip-arrow {
+      border-bottom-color: @brand-primary;
+      border-width: 0 9px 9px;
+      margin-left: -9px;
+      top: -1px;
+    }
+  }
+  &.left {
+    .tooltip-arrow {
+      border-left-color: @brand-primary;
+      border-width: 9px 0 9px 9px;
+      margin-top: -9px;
+      right: -3px;
+    }
+  }
+}
+
+.tooltip-inner {
+  background-color: @brand-primary;
+  line-height: 1.286; // 18px
+  padding: 12px 12px;
+  text-align: center;
+  width: 183px;
+  border-radius: @border-radius-large;
+}

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

@@ -0,0 +1,210 @@
+//
+// Typography
+// --------------------------------------------------
+
+
+// Body text
+// -------------------------
+
+p {
+  font-size: 	 @font-size-base;
+  line-height: @line-height-base;
+  margin: 0 0 (@line-height-computed / 2);
+}
+
+.lead {
+	margin-bottom: @line-height-computed;
+  font-size: 	 floor(@font-size-base * 1.556); 	// ~28px
+  line-height: 1.46428571; 											// ~41px
+  font-weight: 300;
+  
+  @media (min-width: @screen-sm-min) {
+    font-size: (@font-size-base * 1.667);				// ~30px
+  }
+}
+
+// Emphasis & misc
+// -------------------------
+
+// Ex: 18px base font * 83% = about 15px
+small,
+.small {
+  font-size: 83%; 		// ~15px
+  line-height: 2.067; // ~31px
+}
+
+// Contextual emphasis
+.text-muted {
+  color: @text-muted;
+}
+.text-inverse {
+	color: @inverse;
+}
+.text-primary {
+  color: @brand-secondary;
+  &:hover {
+    color: mix(@brand-secondary, black, 80%);
+  }
+}
+.text-warning {
+  color: @state-warning-text;
+  &:hover {
+    color: mix(@state-warning-text, black, 80%);
+  }
+}
+.text-danger {
+  color: @state-danger-text;
+  &:hover {
+    color: mix(@state-danger-text, black, 80%);
+  }
+}
+.text-success {
+  color: @state-success-text;
+  &:hover {
+    color: mix(@state-success-text, black, 80%);
+  }
+}
+.text-info {
+  color: @state-info-text;
+  &:hover {
+    color: mix(@state-info-text, black, 80%);
+  }
+}
+
+
+// Headings
+// -------------------------
+
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+  font-family: @headings-font-family;
+  font-weight: @headings-font-weight;
+  line-height: @headings-line-height;
+  color: @headings-color;
+  
+  small {
+    color: @headings-small-color;
+  }
+}
+
+h1,
+h2,
+h3 {
+  margin-top: @line-height-computed;
+  margin-bottom: (@line-height-computed / 2);
+}
+h4,
+h5,
+h6 {
+  margin-top: (@line-height-computed / 2);
+  margin-bottom: (@line-height-computed / 2);
+}
+
+h6 {
+  font-weight: normal;
+}
+
+h1, .h1 { font-size: @font-size-h1; } // ~62px
+h2, .h2 { font-size: @font-size-h2; } // ~52px
+h3, .h3 { font-size: @font-size-h3; } // ~40px
+h4, .h4 { font-size: @font-size-h4; } // ~29px
+h5, .h5 { font-size: @font-size-h5; }	// ~28px 
+h6, .h6 { font-size: @font-size-h6; } // ~24px
+
+
+// Page header
+// -------------------------
+
+.page-header {
+  padding-bottom: ((@line-height-computed / 2) - 1);
+  margin: (@line-height-computed * 2) 0 @line-height-computed;
+  border-bottom: 1px solid @page-header-border-color;
+}
+
+
+// Lists
+// --------------------------------------------------
+
+// Unordered and Ordered lists
+ul,
+ol {
+  margin-bottom: (@line-height-computed / 2);
+}
+
+// Description Lists
+dl {
+  margin-bottom: @line-height-computed;
+}
+dt,
+dd {
+  line-height: @line-height-base;
+}
+
+// Horizontal description lists
+//
+// Defaults to being stacked without any of the below styles applied, until the
+// grid breakpoint is reached (default of ~768px).
+
+@media (min-width: @grid-float-breakpoint) {
+  .dl-horizontal {
+    dt {
+      width: (@component-offset-horizontal - 20);
+    }
+    dd {
+      margin-left: @component-offset-horizontal;
+    }
+  }
+}
+
+// MISC
+// ----
+
+// Abbreviations and acronyms
+abbr[title],
+abbr[data-original-title] {
+  border-bottom: 1px dotted @abbr-border-color;
+}
+
+// Blockquotes
+blockquote {
+  border-left: 3px solid @blockquote-border-color;
+  padding: 0 0 0 16px;
+  margin: 0 0 @line-height-computed;
+  
+  p {
+    font-size: ceil(@font-size-base * 1.111); // ~20px
+    line-height: 1.55;												// ~31px
+    font-weight: normal;
+    margin-bottom: .4em;
+  }
+  small {
+    font-size: @font-size-base;
+    line-height: @line-height-base;
+    font-style: italic;
+    color: @blockquote-small-color;
+
+    &:before {
+      content: "";
+    }
+  }
+  
+  // Float right with text-align: right
+  &.pull-right {
+    padding-right: 16px;
+    padding-left: 0;
+    border-right: 3px solid @blockquote-border-color;
+    border-left: 0;
+
+    small {
+      &:after {
+        content: "";
+      }
+    }
+  }
+}
+
+// Addresses
+address {
+  margin-bottom: @line-height-computed;
+  line-height: @line-height-base;
+}

data/vendor/assets/stylesheets/modules/ui-slider.less

@@ -0,0 +1,62 @@
+// Slider
+// --------------------------------------------------
+
+.ui-slider {
+  .progress();
+  margin-bottom: 20px;
+  position: relative;
+}
+
+.ui-slider-handle {
+  background-color: mix(@brand-secondary, black, 85%);
+  border-radius: 50%;
+  cursor: pointer;
+  height: 18px;
+  margin-left: -9px;
+  position: absolute;
+  top: -3px;
+  width: 18px;
+  z-index: 2;
+  .transition(background .25s);
+  
+  &[style*='100'] {
+    margin-left: -15px;
+  }
+  &:hover,
+  &:focus {
+    background-color: mix(@brand-secondary, white, 80%);
+    outline: none;
+  }
+  &:active {
+    background-color: mix(@brand-secondary, black, 85%);
+  }
+}
+
+.ui-slider-range {
+  background-color: @brand-secondary;
+  border-radius: 30px 0 0 30px;
+  display: block;
+  height: 100%;
+  position: absolute;
+  z-index: 1;
+}
+
+.ui-slider-segment {
+  background-color: mix(desaturate(@brand-primary, 15%), white, 20%);
+  border-radius: 50%;
+  float: left;
+  height: 6px;
+  margin: 3px -6px 0 0;
+  width: 6px;
+}
+
+.ui-slider-value {
+  float: right;
+  font-size: floor(@component-font-size-base * 0.867); // ~13px
+  margin-top: @progress-height;
+  
+  &.first {
+    clear: left;
+    float: left;
+  }
+}

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

@@ -0,0 +1,458 @@
+//
+// Video Player
+// --------------------------------------------------
+
+// Module color variable
+@controls-color: mix(@brand-primary, black, 75%);
+
+.video-js {
+  background-color: transparent;  
+  // Otherwise you won't see controls in Fullscreen mode
+  margin-top: -95px;
+  position: relative;
+  padding: 0;
+  font-size: 10px;
+  vertical-align: middle;
+  border-radius: @border-radius-large @border-radius-large 0 0;
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility:hidden;
+  -ms-backface-visibility:hidden;
+  backface-visibility:hidden;
+  
+  .vjs-tech {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: @border-radius-large @border-radius-large 0 0;
+  }  
+  &:-moz-full-screen {
+    position: absolute;
+  }  
+}
+
+body.vjs-full-window {
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.video-js {
+  &.vjs-fullscreen {
+    position: fixed;
+    overflow: hidden;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: 100% !important;
+    height: 100% !important;
+    _position: absolute;
+  }  
+  &:-webkit-full-screen {
+    width: 100% !important;
+    height: 100% !important;
+  }  
+}
+
+.vjs-poster {
+  margin: 0 auto;
+  padding: 0;
+  cursor: pointer;
+  position: relative;
+  width: 100%;
+  max-height: 100%;
+  border-radius: @border-radius-large @border-radius-large 0 0;
+}
+
+.video-js {
+  .vjs-text-track-display {
+    text-align: center;
+    position: absolute;
+    bottom: 4em;
+    left: 1em;
+    right: 1em;
+    font-family: @font-family-base;
+  }  
+  .vjs-text-track {
+    display: none;
+    color: @inverse;
+    font-size: 1.4em;
+    text-align: center;
+    margin-bottom: .1em;
+    background: #000;
+    background: rgba(0,0,0,.5);
+  }  
+  .vjs-subtitles {
+    color: #fff;
+  }  
+  .vjs-captions {
+    color: #fc6;
+  }  
+}
+
+.vjs-tt-cue {
+  display: block;
+}
+
+.vjs-fade-in {
+  visibility: visible !important;
+  opacity: 1 !important;
+  .transition(~"visibility 0s linear 0s, opacity .3s linear");
+}
+.vjs-fade-out {
+  visibility: hidden !important;
+  opacity: 0 !important;
+  .transition(~"visibility 0s linear 1.5s, opacity 1.5s linear");
+}
+
+.vjs-control-bar {  
+  position: absolute;
+  bottom: -47px;
+  left: 0;
+  right: 0;
+  margin: 0;
+  padding: 0;
+  height: 47px;
+  color: @inverse;
+  background: @controls-color;
+  border-radius: 0 0 @border-radius-large @border-radius-large;
+  
+  &.vjs-fade-out {
+    visibility: visible !important;
+    opacity: 1 !important;
+  }  
+}
+
+// Video player control general style
+.vjs-control {
+  background-position: center center;
+  background-repeat: no-repeat;
+  position: relative;
+  float: left;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+  height: 18px;
+  width: 18px;
+  
+  &:focus {
+    outline: 0
+  }  
+  div {
+    background-position: center center;
+    background-repeat: no-repeat;
+  }    
+}
+
+// Control tooltip
+.vjs-control-text {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.vjs-play-control {
+  cursor: pointer !important;
+  height: 47px;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 58px;
+  
+  div {
+    position: relative;    
+    height: 47px;
+    
+    &:before,
+    &:after {
+      position: absolute;
+      font-family: "Flat-UI-Icons";
+      color: @brand-secondary;
+      font-size: 16px;
+      top: 50%;
+      left: 50%;
+      margin: -0.55em 0 0 -0.5em;
+      .transition(~"color .25s, opacity .25s");
+    }
+    &:after {
+      content: "\e03b";
+    }
+    &:before {
+      content: "\e03c";
+    }
+  }
+}
+
+.vjs-paused .vjs-play-control {  
+  &:hover {
+    div:before {
+      color: mix(@brand-secondary, black, 85%);
+    } 
+  }  
+  div {
+    &:after {
+      .opacity(0);
+    }
+    &:before {
+      .opacity(1);
+    }
+  }  
+}
+
+.vjs-playing .vjs-play-control {  
+  &:hover {
+    div:after {
+      color: mix(@brand-secondary, black, 85%);
+    } 
+  }  
+  div {
+    &:after {
+      .opacity(1);
+    }
+    &:before {
+      .opacity(0);
+    }    
+  }  
+}
+
+.vjs-rewind-control {
+  width: 5em;
+  cursor: pointer !important;
+  
+  div {
+    width: 19px;
+    height: 16px;
+    background: none transparent;
+    margin: .5em auto 0;
+  }  
+}
+
+.vjs-mute-control {
+  background: ~"url(../images/video/volume-full.png) center -48px no-repeat";
+  background-size: 16px 64px;
+  cursor: pointer !important;
+  position: absolute;
+  right: 51px;
+  top: 14px;
+
+  &:hover,
+  &:focus {
+    div {
+      opacity: 0;
+    }  
+  }
+  
+  // Muted state
+  &.vjs-vol-0 {
+    &,
+    div {
+      background-image: ~"url(../images/video/volume-off.png)";
+    }  
+  }
+  div {
+    background: @controls-color ~"url(../images/video/volume-full.png) no-repeat center 2px";
+    background-size: 16px 64px;
+    height: 18px;
+    .transition(opacity .25s);
+  }  
+}
+
+.vjs-volume-control,
+.vjs-volume-level,
+.vjs-volume-handle,
+.vjs-volume-bar {
+  display: none;
+}
+
+.vjs-progress-control {
+  position: absolute;
+  left: 60px;
+  right: 180px;
+  height: 12px;
+  width: auto;
+  top: 18px;
+  background: mix(@brand-primary, @inverse, 93%);
+  border-radius: 32px;
+}
+
+.vjs-progress-holder {
+  position: relative;
+  cursor: pointer !important;
+  padding: 0;
+  margin: 0;
+  height: 12px;
+}
+
+.vjs-play-progress,
+.vjs-load-progress {
+  position: absolute;
+  display: block;
+  height: 12px;
+  margin: 0;
+  padding: 0;
+  left: 0;
+  top: 0;
+  border-radius: 32px;
+}
+
+.vjs-play-progress {
+  background: @brand-secondary;
+  left: -1px;
+}
+
+.vjs-load-progress {
+  background: mix(@brand-primary, @inverse, 20%);
+  border-radius: 32px 0 0 32px;
+  
+  &[style*='100%'],
+  &[style*='99%'] {
+    border-radius: 32px;
+  }  
+}
+
+.vjs-seek-handle {
+  background-color: mix(@brand-secondary, black, 85%);
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  margin: -3px 0 0 1px;
+  left: 0;
+  top: 0;
+  border-radius: 50%;
+  .transition(background-color .25s);  
+
+  &[style*='95.'] {
+    margin-left: 3px;
+  }
+  &[style='left: 0%;'] {
+    margin-left: -2px;
+  }
+  &:hover,
+  &:focus {
+    background-color: mix(@brand-secondary, black, 75%);
+  }  
+  &:active {
+    background-color: mix(@brand-secondary, black, 65%)
+  }  
+}
+
+// Player time controls
+.vjs-time-controls {
+  position: absolute;
+  height: 20px;
+  width: 50px;
+  top: 16px;
+  font: 300 13px @font-family-base;
+}
+
+.vjs-current-time {
+  right: 128px;
+  text-align: right;
+}
+
+.vjs-duration {
+  color: mix(@brand-primary, @inverse, 80%);
+  right: 69px;
+  text-align: left;
+}
+
+.vjs-remaining-time {
+  display: none;
+}
+
+.vjs-time-divider {
+  color: mix(@brand-primary, @inverse, 80%);
+  font-size: 14px;
+  position: absolute;
+  right: 121px;
+  top: 15px;
+}
+
+.vjs-secondary-controls {
+  float: right;
+}
+
+.vjs-fullscreen-control {
+  background-image: ~"url(../images/video/fullscreen.png)";
+  background-position: center -47px;
+  background-size: 15px 64px;
+  cursor: pointer !important;
+  position: absolute;
+  right: 17px;
+  top: 13px;
+
+  &:hover,
+  &:focus {
+    div {
+      opacity: 0;
+    }  
+  }
+  div {
+    height: 18px;
+    background: ~"url(../images/video/fullscreen.png) no-repeat center 2px";
+    background-size: 15px 64px;
+    .transition(opacity .25s);
+  }  
+}
+
+// Subtitles menu. Hide for no need by design.
+.vjs-menu-button {
+  display: none !important;
+}
+
+// Video preloader
+.sharp-keyframes() {
+  0% {
+    background: #e74c3c;  
+    border-radius: 10px;  
+    .rotate(0deg);    
+  }
+  50% {
+    background: #ebedee;
+    border-radius: 0;
+    .rotate(180deg);
+  }
+  100% {
+    background: #e74c3c;
+    border-radius: 10px;
+    .rotate(360deg);
+  }  
+}    
+
+@-webkit-keyframes sharp {
+  .sharp-keyframes();
+}
+
+@-moz-keyframes sharp {
+  .sharp-keyframes();
+}
+
+@-o-keyframes sharp {
+  .sharp-keyframes();
+}
+
+@keyframes sharp {
+  .sharp-keyframes();
+}
+
+.vjs-loading-spinner {
+  background: #ebedee;
+  display: none;
+  height: 16px;
+  left: 50%;
+  margin: -8px 0 0 -8px;
+  position: absolute;
+  top: 50%;
+  width: 16px;
+  border-radius: 10px;
+  .animation(sharp 2s ease infinite);  
+}