thesis 0.1.1 → 0.1.3

data/app/assets/javascripts/thesis/utilities.coffee

@@ -0,0 +1,13 @@
+class @Utilities
+
+  # settimeout
+  @delay: (ms, func) -> setTimeout func, ms
+
+  # smoothscroll
+  @scroll_to: (area, modifier, callback) ->
+    modifier = modifier || 0
+    go_to_position = $(area).offset().top
+    $("html,body").stop()
+    $("html,body").animate
+      scrollTop: go_to_position + modifier
+    , "slow", callback

data/app/assets/stylesheets/thesis.sass

@@ -0,0 +1,4 @@
+@import "thesis/base/bourbon/bourbon"
+@import "thesis/base/base"
+@import "thesis/_mixins/**/*"
+@import "thesis/thesis"

data/app/assets/stylesheets/thesis/_mixins/_barber-pole.sass

@@ -0,0 +1,5 @@
+@mixin barber_pole($color:$gray, $intensity:0.25, $speed:.7s)
+  @include animation(barber_pole $speed linear infinite)
+  @include background-image(linear-gradient(-45deg, rgba(255,255,255, $intensity) 25%,transparent 25%,transparent 50%,rgba(255,255,255, $intensity) 50%,rgba(255,255,255, $intensity) 75%,transparent 75%))
+  background-color : $color
+  background-size  : 30px 30px

data/app/assets/stylesheets/thesis/_mixins/editor.sass

@@ -0,0 +1,15 @@
+@mixin editor_icons($icons)
+  @each $class, $color in $icons
+    &.#{$class} > i
+      background-color: $color
+      &:hover
+        background-color: darken($color, 8%)
+        @include transition(background-color .3s ease-in-out)
+
+@mixin curve_buttons($limit)
+  @for $i from 1 to $limit
+    &:nth-child(#{$i})
+      @include transform(rotate(- (($limit - $i) * 3.14)+deg))
+      @include transform-origin(100% 100%)
+      $right: (($limit  - $i) * $limit) * ($limit + 1 - $i) / 3
+      right: $right+px

data/app/assets/stylesheets/thesis/_thesis.sass

@@ -0,0 +1,207 @@
+body
+  @include transition(all .3s ease-in-out)
+
+#thesis-editor
+  display         : block
+  position        : absolute
+  right           : 15px
+  bottom          : 15px
+  z-index         : 1040
+  position        : fixed
+  z-index         : 1040
+  color           : white
+  line-height     : 0
+  font-size       : 0
+  text-decoration : none
+
+  .thesis-button
+    @include editor_icons(("cancel": $orange, "delete": $pink, "add": $blue, "save": $green, "settings": $yellow ))
+    @include transition(opacity .75s ease-in-out, right .75s ease-in-out, transform .75s ease-in-out, padding .001s linear .75s, height .001s linear .75s)
+    right      : 0
+    opacity    : 0
+    display    : block
+    float      : right
+    clear      : both
+    text-align : right
+    position   : relative
+    cursor     : pointer
+    padding    : 0px 0px
+    height     : 0px
+    width      : auto
+
+    &.edit
+      opacity        : 1
+      height         : 70px
+      padding-bottom : 0px !important
+
+    &:hover
+      min-width  : 320px
+
+      .tooltip
+        position : relative
+        right    : 0px
+        opacity  : 1
+        @include transition(all .2s ease-out)
+
+    i
+      position         : relative
+      z-index          : 2
+      width            : 60px
+      height           : 60px
+      display          : inline-block
+      background-color : $gray
+      border           : 3px solid white
+      font-size        : 30px
+      line-height      : 55px
+      text-align       : center
+      vertical-align   : middle
+      @include transition(background-color .3s ease-in-out)
+
+      &:hover
+        background-color: darken($gray, 8%)
+        @include transition(background-color .3s ease-in-out)
+
+    .tooltip
+      z-index        : 1
+      position       : absolute
+      right          : -30px
+      font-size      : 13px
+      color          : white
+      background     : rgba(black, .70)
+      padding        : 5px 15px 4px
+      line-height    : 1
+      opacity        : 0
+      text-transform : uppercase
+      letter-spacing : 1px
+      vertical-align : middle
+      display        : inline-block
+      font-weight    : normal
+      margin-right   : 15px
+      border         : 2px solid white
+
+      &.error
+        background : rgba(darken(red, 20%), .75)
+
+
+body.thesis-editing
+
+  .thesis-content
+    position   : relative
+    z-index    : 1039
+    padding    : 5px
+    min-width  : 40px
+    display    : block
+    outline    : 2px solid lighten($yellow,15%) !important
+    cursor     : crosshair
+    min-height : 1em
+
+    &:before, &:after
+      @include box-sizing(content-box)
+      @include barber_pole(lighten($orange,15%), .5, 1.5s)
+      position : absolute
+      padding  : 2px
+      top      : -2px
+      left     : -2px
+      width    : 100%
+      height   : 100%
+      content  : ""
+      z-index  : -2
+      opacity  : 0
+
+    &:after
+      @include transition(opacity .7s ease-in-out)
+      padding    : 0
+      background : white
+      z-index    : -1
+      top        : 0
+      left       : 0
+      opacity    : .8
+
+    &.isModified
+      outline : 2px solid lighten($green,15%) !important
+
+    &.inEditMode
+      outline : none !important
+      cursor  : text
+
+      &:before
+        opacity: 1
+
+      &:after
+        @include transition(none)
+        opacity: 1
+
+  #thesis-editor
+    .thesis-button
+      &.edit
+        i
+          @include barber_pole
+
+    &.active
+      .thesis-button
+        @include curve_buttons(6)
+        @include transition(opacity .75s ease-in-out, right .75s ease-in-out, transform .75s ease-in-out)
+        padding  : 10px 0px
+        opacity  : 1
+        height   : 80px
+
+.hallotoolbar
+  z-index: 1040
+
+.thesis-fader
+  top              : 0px
+  left             : 0px
+  width            : 100%
+  height           : 100%
+  position         : fixed
+  background-color : rgba(29, 49, 58, .15)
+  cursor           : not-allowed
+  z-index          : 1038
+  @include animation(thesis_fader .7s ease-in-out)
+
+#thesis-modal
+  display       : none
+  position      : fixed
+  width         : 600px
+  height        : auto
+  background    : white
+  left          : 50%
+  top           : 50%
+  margin-left   : -300px
+  margin-top    : -100px
+  border-radius : 50px
+  z-index       : 1039
+  padding       : 25px
+  border        : 3px solid $blue
+  box-shadow    : 0px 0px 0px 4px white
+  color         : darken($gray, 20%)
+  font-family   : $raleway
+  @include animation(modal_border 10s ease-in-out infinite)
+
+  &.settings
+    margin-top : -252px
+
+  .modal-icon
+    text-align    : center
+    font-size     : 24px
+    font-weight   : 300
+    color         : $blue
+    margin-bottom : 5px
+    @include animation(modal_icon_color 10s ease-in-out infinite)
+
+  .modal-title
+    text-align    : center
+    font-weight   : 300
+    font-size     : 28px
+    margin-bottom : 15px
+
+  &.windows
+    .modal-field.cancel
+      float: right
+
+    .modal-field.save
+      float: left
+
+body.thesis-blur #wrapper
+  @include transition(all .3s ease-in-out)
+  @include filter(blur(12px))

data/app/assets/stylesheets/thesis/base/_base.sass

@@ -0,0 +1,5 @@
+@import "colors"
+@import "fonts"
+@import "../_mixins/**/*"
+@import "keyframes"
+@import "forms"

data/app/assets/stylesheets/thesis/base/_colors.sass

@@ -0,0 +1,6 @@
+$gray   : #A0A1A6
+$orange : #F88834
+$pink   : #CB006C
+$green  : #76A642
+$blue   : #1BB6EC
+$yellow : #f0c600

data/app/assets/stylesheets/thesis/base/_fonts.sass

@@ -0,0 +1,6 @@
+// RALEWAY
+@import url(//fonts.googleapis.com/css?family=Raleway:400,300,700)
+$raleway: "Raleway", sans-serif
+
+// FONT AWESOME
+@import url(//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css)

data/app/assets/stylesheets/thesis/base/_forms.scss

@@ -0,0 +1,165 @@
+#thesis-modal {
+  form {
+    margin  : 0;
+    padding : 0
+  }
+
+  input,
+  label,
+  select {
+    display     : block;
+    font-family : $raleway;
+    font-size   : 12px;
+  }
+
+  label {
+    font-weight   : normal;
+    margin-bottom : 8px;
+
+    &.required:after {
+      content: "*";
+    }
+
+    abbr {
+      display: none;
+    }
+  }
+
+  textarea,
+  input,
+  button,
+  select[multiple=multiple] {
+    @include box-sizing(border-box);
+    @include transition(border-color);
+    background-color : white;
+    border           : none;
+    box-shadow       : none;
+    font-family      : $raleway;
+    font-size        : 17px;
+    margin-bottom    : 0px;
+    padding          : 5px 0px;
+    width            : 100%;
+    color            : darken($gray, 20%);
+    font-weight      : bold;
+
+    @include placeholder {
+      color: #A7AAAB;
+    }
+  }
+
+  textarea {
+    resize : vertical;
+    height : 60px;
+  }
+
+  input[type="search"] {
+    @include appearance(none);
+  }
+
+  input[type="checkbox"], input[type="radio"] {
+    display      : inline;
+    margin-right : 15px;
+  }
+
+  input[type="file"] {
+    margin-bottom : 8px;
+    width         : 100%;
+  }
+
+  select {
+    width         : auto;
+    max-width     : 100%;
+    margin-bottom : 8px;
+  }
+
+  label.checkbox {
+    margin-bottom : 10px;
+    // @extend %noselect;
+
+    input {
+      display : none;
+    }
+
+    input:checked {
+      + span:before {
+        background : image-url('ico.checkbox-selected.png') no-repeat center center;
+      }
+    }
+
+    span {
+      font-size   : 15px;
+      color       : #8C9092;
+      font-weight : normal;
+      line-height : 20px;
+
+      &:before {
+        display        : inline-block;
+        margin-right   : 8px;
+        background     : image-url('ico.checkbox.png') no-repeat center center;
+        width          : 20px;
+        height         : 20px;
+        content        : "";
+        vertical-align : middle;
+      }
+    }
+  }
+
+  .modal-field {
+    width         : 100%;
+    border-bottom : 1px solid $gray;
+    clear         : both;
+    @include clearfix;
+
+    > span {
+      width   : 33%;
+      float   : left;
+      display : block;
+      padding : 12px 0px 5px;
+    }
+
+    > input {
+      width: 66%;
+      float: left;
+    }
+
+    &.submit, &.cancel {
+      border-bottom : 0px;
+      margin-bottom : 0px;
+      margin-top    : 15px;
+      float         : left;
+      width         : 50%;
+      clear         : none;
+
+      button {
+        height : 60px;
+        width  : 100%;
+        color  : $green;
+
+        i, span {
+          display        : inline-block;
+          vertical-align : middle;
+          margin         : 0px 5px;
+        }
+
+        &:hover {
+          background-color : rgba($green,20%);
+          box-shadow       : 0px 0px 35px 26px white inset;
+          @include transition(background-color .2s ease-in-out);
+        }
+      }
+    }
+
+    &.cancel {
+      button {
+        color: $pink;
+        @include animation(none);
+
+        &:hover {
+          background-color : rgba($pink,20%);
+          box-shadow       : 0px 0px 35px 26px white inset;
+          @include transition(background-color .2s ease-in-out);
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/thesis/base/_keyframes.sass

@@ -0,0 +1,205 @@
+@-webkit-keyframes barber_pole
+  0%
+    background-position: 0px 0px
+  100%
+    background-position: 60px 0px
+
+@-moz-keyframes barber_pole
+  0%
+    background-position: 0px 0px
+  100%
+    background-position: 60px 0px
+
+@-ms-keyframes barber_pole
+  0%
+    background-position: 0px 0px
+  100%
+    background-position: 60px 0px
+
+@-o-keyframes barber_pole
+  0%
+    background-position: 0px 0px
+  100%
+    background-position: 60px 0px
+
+@keyframes barber_pole
+  0%
+    background-position: 0px 0px
+  100%
+    background-position: 60px 0px
+
+
+
+@-webkit-keyframes thesis_fader
+  0%
+    opacity: 0
+  100%
+    opacity: 1
+
+@-moz-keyframes thesis_fader
+  0%
+    opacity: 0
+  100%
+    opacity: 1
+
+@-ms-keyframes thesis_fader
+  0%
+    opacity: 0
+  100%
+    opacity: 1
+
+@-o-keyframes thesis_fader
+  0%
+    opacity: 0
+  100%
+    opacity: 1
+
+@keyframes thesis_fader
+  0%
+    opacity: 0
+  100%
+    opacity: 1
+
+
+
+@-webkit-keyframes modal_border
+  0%
+    border-color: $blue
+  20%
+    border-color: $green
+  40%
+    border-color: $yellow
+  60%
+    border-color: $orange
+  80%
+    border-color: $pink
+  100%
+    border-color: $blue
+
+@-moz-keyframes modal_border
+  0%
+    border-color: $blue
+  20%
+    border-color: $green
+  40%
+    border-color: $yellow
+  60%
+    border-color: $orange
+  80%
+    border-color: $pink
+  100%
+    border-color: $blue
+
+@-ms-keyframes modal_border
+  0%
+    border-color: $blue
+  20%
+    border-color: $green
+  40%
+    border-color: $yellow
+  60%
+    border-color: $orange
+  80%
+    border-color: $pink
+  100%
+    border-color: $blue
+
+@-o-keyframes modal_border
+  0%
+    border-color: $blue
+  20%
+    border-color: $green
+  40%
+    border-color: $yellow
+  60%
+    border-color: $orange
+  80%
+    border-color: $pink
+  100%
+    border-color: $blue
+
+@keyframes modal_border
+  0%
+    border-color: $blue
+  20%
+    border-color: $green
+  40%
+    border-color: $yellow
+  60%
+    border-color: $orange
+  80%
+    border-color: $pink
+  100%
+    border-color: $blue
+
+
+
+@-webkit-keyframes modal_icon_color
+  0%
+    color: darken($blue, 10%)
+  20%
+    color: darken($green, 10%)
+  40%
+    color: darken($yellow, 10%)
+  60%
+    color: darken($orange, 10%)
+  80%
+    color: darken($pink, 10%)
+  100%
+    color: darken($blue, 10%)
+
+@-moz-keyframes modal_icon_color
+  0%
+    color: darken($blue, 10%)
+  20%
+    color: darken($green, 10%)
+  40%
+    color: darken($yellow, 10%)
+  60%
+    color: darken($orange, 10%)
+  80%
+    color: darken($pink, 10%)
+  100%
+    color: darken($blue, 10%)
+
+@-ms-keyframes modal_icon_color
+  0%
+    color: darken($blue, 10%)
+  20%
+    color: darken($green, 10%)
+  40%
+    color: darken($yellow, 10%)
+  60%
+    color: darken($orange, 10%)
+  80%
+    color: darken($pink, 10%)
+  100%
+    color: darken($blue, 10%)
+
+@-o-keyframes modal_icon_color
+  0%
+    color: darken($blue, 10%)
+  20%
+    color: darken($green, 10%)
+  40%
+    color: darken($yellow, 10%)
+  60%
+    color: darken($orange, 10%)
+  80%
+    color: darken($pink, 10%)
+  100%
+    color: darken($blue, 10%)
+
+@keyframes modal_icon_color
+  0%
+    color: darken($blue, 10%)
+  20%
+    color: darken($green, 10%)
+  40%
+    color: darken($yellow, 10%)
+  60%
+    color: darken($orange, 10%)
+  80%
+    color: darken($pink, 10%)
+  100%
+    color: darken($blue, 10%)