flatui-rails 0.0.1

data/vendor/assets/stylesheets/flat-ui/modules/_todo.sass

@@ -0,0 +1,77 @@
+// Todo list
+.todo
+  background-color: scale-color($base, $lightness: -15%)
+  border-radius: 8px 8px 6px 6px
+  color: scale-color($base, $lightness: 33%)
+  margin-bottom: 20px
+
+  ul
+    margin: 0
+    list-style-type: none
+
+  li
+    background: $base url('../images/todo/todo.png') 92% center no-repeat
+    background-size: 20px 20px
+    cursor: pointer
+    margin-top: 2px
+    padding: 18px 42px 17px 25px
+    position: relative
+    +transition(.25s)
+    &:first-child
+      margin-top: 0
+    &:last-child
+      border-radius: 0 0 6px 6px
+      padding-bottom: 18px
+    &.todo-done
+      background: transparent url('../images/todo/done.png') 92% center no-repeat
+      background-size: 20px 20px
+      color: $firm
+
+      .todo-name
+        color: $firm
+
+.todo-search
+  background: $firm url('../images/todo/search.png') 92% center no-repeat
+  background-size: 16px 16px
+  border-radius: 6px 6px 0 0
+  color: $base
+  padding: 19px 25px 20px
+
+input.todo-search-field
+  background: none
+  border: none
+  color: $base
+  font-size: 19px
+  font-weight: 700
+  margin: 0
+  line-height: 23px
+  padding: 5px 0
+  text-indent: 0
+  +box-shadow(none)
+  +placeholder-color($base)
+
+.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
+
+// 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)
+  .todo
+    li
+      background-image: ('../images/todo/todo-2x.png')
+      &.todo-done
+        background-image: ('../images/todo/done-2x.png')
+
+  .todo-search
+    background-image: ('../images/todo/search-2x.png')
+

data/vendor/assets/stylesheets/flat-ui/modules/_toggle.sass

@@ -0,0 +1,85 @@
+// Toggle
+.toggle
+  background-color: $base
+  border-radius: 60px
+  color: $inverse
+  height: 29px
+  margin: 0 12px 12px 0
+  overflow: hidden
+  +clearfix
+  +inline-block
+  +transition(.25s)
+
+  // Common style -----------------------------
+  &.toggle-off
+    background-color: scale-color(desaturate($base, 15%), $lightness: 75%)
+
+    .toggle-radio
+      background-image: url('../images/toggle/icon-off.png')
+      background-position: 0 0
+      color: $inverse
+      left: 0
+      margin-left: .5px
+      margin-right: -13px
+      z-index: 1
+      &:first-child
+        left: -120%
+
+  .toggle-radio
+    background: url('../images/toggle/icon-on.png') right top no-repeat
+    color: $firm
+    display: block
+    font-weight: 700
+    height: 21px
+    left: 120%
+    margin-left: -13px
+    padding: 5px 32px 3px
+    position: relative
+    text-align: center
+    z-index: 2
+    +transition(.25s)
+
+    &:first-child
+      margin-bottom: -29px
+      left: 0
+
+  input
+    display: none
+    position: absolute
+    outline: none !important
+    // Radios in IE should be always visible in order to work
+    display: block\9
+    +opacity(0.01)
+
+  // Iconic style -----------------------------
+  &.toggle-icon
+    border-radius: 6px 7px 7px 6px
+
+    &.toggle-off
+      border-radius: 7px 6px 6px 7px
+      .toggle-radio
+        background-image: url('../images/toggle/block-off.png')
+        background-position: 0 0
+
+    .toggle-radio
+      background-image: url('../images/toggle/block-on.png')
+      background-position: 62px 0
+      border-radius: 6px
+      min-width: 27px
+      text-align: right
+
+      &:first-child
+        text-align: left
+
+// 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)
+  .toggle
+    &.toggle-off
+      .toggle-radio
+        background-image: url('../images/toggle/icon-off-2x.png')
+        background-size: 30px 29px
+
+    .toggle-radio
+      background-image: url('../images/toggle/icon-on-2x.png')
+      background-size: 30px 29px
+

data/vendor/assets/stylesheets/flat-ui/modules/_tooltip.sass

@@ -0,0 +1,45 @@
+// Tooltip on hover
+.tooltip
+  font-size: 13px
+
+  &.in
+    +opacity(1)
+
+  &.top
+    padding-bottom: 9px
+    .tooltip-arrow
+      border-top-color: $base
+      border-width: 9px 9px 0
+      bottom: 0
+      margin-left: -9px
+
+  &.right
+    .tooltip-arrow
+      border-right-color: $base
+      border-width: 9px 9px 9px 0
+      margin-top: -9px
+      left: -3px
+
+  &.bottom
+    padding-top: 8px
+    .tooltip-arrow
+      border-bottom-color: $base
+      border-width: 0 9px 9px
+      margin-left: -9px
+      top: -1px
+
+  &.left
+    .tooltip-arrow
+      border-right-color: $base
+      border-width: 9px 9px 9px 0
+      margin-top: -3px
+      top: -3px
+
+.tooltip-inner
+  background-color: $base
+  line-height: 18px
+  padding: 12px 12px
+  text-align: center
+  width: 183px
+  +border-radius(6px)
+

data/vendor/assets/stylesheets/flat-ui/modules/_type.sass

@@ -0,0 +1,43 @@
+// Typography
+body
+  color: $base
+  font: #{$base-font-size}/#{1.231} 'Lato', sans-serif
+
+a
+  color: $firm
+  text-decoration: underline
+  +transition(.25s)
+  &:hover
+    color: $success
+    text-decoration: none
+
+h1
+  font-size: 32px
+  font-weight: 900
+
+h2
+  font-size: 26px
+  font-weight: 700
+  margin-bottom: 2px
+
+h3
+  font-size: 24px
+  font-weight: 700
+  margin-bottom: 4px
+  margin-top: 2px
+
+h4
+  font-size: 18px
+  font-weight: 500
+  margin-top: 4px
+
+h5
+  font-size: 16px
+  font-weight: 500
+  text-transform: uppercase
+
+h6
+  font-size: 13px
+  font-weight: 500
+  text-transform: uppercase
+

data/vendor/assets/stylesheets/flat-ui/modules/_ui-slider.sass

@@ -0,0 +1,44 @@
+// jQuery UI Slider
+.ui-slider
+  @extend .progress
+  margin-bottom: 20px
+  position: relative
+
+.ui-slider-handle
+  background-color: scale-color($firm, $lightness: -15%)
+  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: scale-color($firm, $lightness: 20%)
+    outline: none
+  &:active
+    background-color: scale-color($firm, $lightness: -15%)
+
+.ui-slider-range
+  background-color: $firm
+  border-radius: 30px 0 0 30px
+  display: block
+  height: 100%
+  position: absolute
+  z-index: 1
+
+.ui-slider-segment
+  background-color: scale-color(desaturate($base, 15%), $lightness: 80%)
+  border-radius: 50%
+  float: left
+  height: 6px
+  margin: 3px -6px 0 25%
+  width: 6px
+

data/vendor/assets/stylesheets/flat-ui/modules/_video.sass

@@ -0,0 +1,358 @@
+// Styling JS Video plugin
+$controls-color: scale-color($base, $lightness: -15%)
+
+.video-js
+  background-color: $base
+  border-radius: 6px 6px 0 0
+  // Otherwise you won't see controls in Fullscreen mode
+  margin-top: -95px
+  position: relative
+  padding: 0
+  font-size: 10px
+  vertical-align: middle
+  .vjs-tech
+    border-radius: 6px 6px 0 0
+    position: absolute
+    top: 0
+    left: 0
+    width: 100%
+    height: 100%
+  &:-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%
+
+.video-js
+  .vjs-text-track-display
+    text-align: center
+    position: absolute
+    bottom: 4em
+    left: 1em
+    right: 1em
+    font-family: $base-font-family
+  .vjs-text-track
+    display: none
+    color: #fff
+    font-size: 1.4em
+    text-align: center
+    margin-bottom: .1em
+    background: #000
+    background: rgba(0, 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-controls
+  border-radius: 0 0 6px 6px
+  position: absolute
+  bottom: -47px
+  left: 0
+  right: 0
+  margin: 0
+  padding: 0
+  height: 47px
+  color: $inverse
+  background: $controls-color
+  &.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
+
+.vjs-paused .vjs-play-control
+  background: url('../images/video/play.png') center -31px no-repeat
+  background-size: 16px 64px
+  &:hover
+    div
+      opacity: 0
+  div
+    background: url('../images/video/play.png') center 15px no-repeat
+    background-size: 16px 64px
+    height: 47px
+    +transition(opacity .25s)
+
+.vjs-playing .vjs-play-control
+  background: url('../images/video/pause.png') center -31px no-repeat
+  background-size: 15px 64px
+  &:hover
+    div
+      opacity: 0
+
+  div
+    background: url('../images/video/pause.png') center 15px no-repeat
+    background-size: 15px 64px
+    height: 47px
+    +transition(opacity .25s)
+
+.vjs-rewind-control
+  width: 5em
+  cursor: pointer!important
+  div
+    width: 19px
+    height: 16px
+    background: url('video-js.png')
+    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
+  border-radius: 32px
+  position: absolute
+  left: 60px
+  right: 180px
+  height: 12px
+  width: auto
+  top: 18px
+  background: scale-color($base, $lightness: 93%)
+
+.vjs-progress-holder
+  position: relative
+  cursor: pointer!important
+  padding: 0
+  margin: 0
+  height: 12px
+
+.vjs-play-progress, .vjs-load-progress
+  border-radius: 32px
+  position: absolute
+  display: block
+  height: 12px
+  margin: 0
+  padding: 0
+  left: 0
+  top: 0
+
+.vjs-play-progress
+  background: $firm
+  left: -1px
+
+.vjs-load-progress
+  background: scale-color(desaturate($base, 15%), $lightness: 80%)
+  border-radius: 32px 0 0 32px
+  &[style*='100%'],
+  &[style*='99%']
+    border-radius: 32px
+
+.vjs-seek-handle
+  background-color: scale-color($firm, $lightness: -15%)
+  border-radius: 50%
+  position: absolute
+  width: 18px
+  height: 18px
+  margin: -3px 0 0 1px
+  left: 0
+  top: 0
+  +transition(background-color .25s)
+
+  &[style*='95.']
+    margin-left: 3px
+
+  &[style='left: 0%;']
+    margin-left: -2px
+
+  &:hover,
+  &:focus
+    background-color: scale-color($firm, $lightness: -25%)
+  &:active
+    background-color: scale-color($firm, $lightness: -33%)
+
+// Player time controls
+.vjs-time-controls
+  position: absolute
+  height: 20px
+  width: 50px
+  top: 16px
+  font: 300 13px $base-font-family
+
+.vjs-current-time
+  right: 128px
+  text-align: right
+
+.vjs-duration
+  color: scale-color(desaturate($base, 15%), $lightness: 25%)
+  right: 69px
+  text-align: left
+
+.vjs-remaining-time
+  display: none
+
+.vjs-time-divider
+  color: scale-color(desaturate($base, 15%), $lightness: 25%)
+  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
+    +transform(rotate(0deg))
+
+  50%
+    background: #ebedee
+    border-radius: 0
+    +transform(rotate(180deg))
+
+  100%
+    background: #e74c3c
+    border-radius: 10px
+    +transform(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
+  border-radius: 10px
+  display: none
+  height: 16px
+  left: 50%
+  margin: -8px 0 0 -8px
+  position: absolute
+  top: 50%
+  width: 16px
+  +animation(sharp 2s ease infinite)
+