tolaria 1.0.0

data/app/assets/stylesheets/admin/components/forms/_image_association_select.scss

@@ -0,0 +1,20 @@
+.image-association-select {
+
+  &-image {
+    border-radius: 1px;
+    border: 1px solid $cPlum;
+    display: inline-block;
+    margin-top: 12px;
+    max-width: 100%;
+    width: 520px;
+
+    &.-hidden {
+      display: none;
+    }
+
+    @include min-width($bpFull) {
+      margin-left: 20%;
+    }
+  }
+
+}

data/app/assets/stylesheets/admin/components/forms/_markdown_composer.scss

@@ -0,0 +1,149 @@
+.markdown-composer {
+
+  @include min-width($bpFull) {
+    float: left;
+    width: 79%;
+    max-width: 620px;
+  }
+
+  &-controls {
+
+    @include clearfix;
+    background: $cWhite;
+    border-radius: 2px 2px 0 0;
+    border: 1px solid $cGrey;
+    border-bottom: 0;
+    padding: 12px 10px 12px 10px;
+    transition: background-color 100ms linear, border-color 100ms linear;
+    max-width: 1150px;
+    margin: 0 auto -1px auto;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+
+    &-left {
+      float: left;
+    }
+
+    &-right {
+      float: right;
+    }
+
+    .-focused &,
+    .-fullscreen & {
+      border-color: darken($cSapphire, 10);
+      border-bottom: 0;
+      border-right-color: $cSapphire;
+    }
+
+  }
+
+  textarea {
+    border-radius: 0px 0px 2px 2px;
+    border-top: 1px dashed $cGrey;
+    color: #000;
+    font-family: $fMonospace;
+    max-width: none;
+    font-size: 14px;
+    padding: 12px 12px 12px 12px;
+    width: 100%;
+    &:focus {
+      border-top-color: $cGrey;
+    }
+  }
+
+  // THIS ISN'T EVEN MY FINAL FORM!
+
+  .-fullscreen-toggle {
+    display: none;
+    @include min-width($bpFull) {
+      display: block;
+    }
+  }
+
+  &.-fullscreen {
+
+    display: block;
+    position: fixed;
+    z-index: 1000000;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: $cWhite;
+    padding: 3% 5%;
+    background: $cCoolGrey;
+    max-width: none;
+
+    .markdown-composer-workspace {
+      @include clearfix;
+      position: relative;
+      height: 100%;
+      max-width: 1150px;
+      margin: 0 auto;
+    }
+
+    textarea {
+      display: block;
+      width: 50%;
+      height: 94%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      font-size: 14px;
+      border-left-color: darken($cSapphire, 10);
+      border-bottom-color: $cSapphire;
+      border-right-color: $cTaupe;
+    }
+
+    .markdown-composer-preview {
+
+      height: 94%;
+      overflow-y: scroll;
+      padding: 12px 16px;
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 50%;
+
+      background: #fdfdfd;
+      border-top: 1px dashed $cGrey;
+      border-radius: 0 0 2px 0;
+      border-bottom: 1px solid $cSapphire;
+      border-right: 1px solid $cSapphire;
+
+    }
+
+  }
+
+}
+
+.markdown-composer-button {
+
+  background: none;
+  color: $cGrey;
+  transition: color 100ms linear;
+
+  span {
+    font-size: 12px;
+    font-weight: bold;
+    line-height: 16px;
+    text-transform: uppercase;
+  }
+
+}
+
+.markdown-composer.-focused,
+.markdown-composer:hover,
+.markdown-composer:focus {
+
+  .markdown-composer-button {
+    color: $cBlack;
+    &:hover, &:active {
+      color: $cSapphire;
+    }
+  }
+
+}
+

data/app/assets/stylesheets/admin/components/forms/_nested_fields.scss

@@ -0,0 +1,63 @@
+.has-many {
+
+  h3 {
+    @include clearfix;
+    display: block;
+    clear: both;
+    float: left;
+    width: 100%;
+    width: calc(100% + 20px);
+    background-color: $cCoolGrey;
+    border-top: 1px solid $cPlum;
+    border-bottom: 1px solid black(0.2);
+    padding: 8px 4px;
+    font-size: 14px;
+    padding: 8px 0 8px 20px;
+    margin: -16px -16px 15px -20px;
+    span {
+      font-weight: bold;
+      float: left;
+      padding: 2px 0 2px 0;
+    }
+    .button {
+      float: right;
+      margin: 0 20px 0 0;
+    }
+  }
+
+  &-create {
+
+    @include clearfix;
+    border-bottom: 1px dashed $cGrey;
+    border-top: 3px double $cGrey;
+    clear: both;
+    margin-top: -16px;
+    padding: 30px 0;
+    text-align: center;
+    transition: background-color 100ms linear;
+    width: 100%;
+    &:hover, &:active, &:focus {
+      background: black(0.02);
+    }
+  }
+
+  &-undo {
+    @include clearfix;
+    display: block;
+    clear: both;
+    float: left;
+    width: 100%;
+    text-align: center;
+    padding: 30px 5% 30px 5%;
+    margin: -16px 0 16px 0;
+    &:hover, &:active, &:focus {
+      background: black(0.01);
+    }
+    &-text {
+      display: block;
+      margin: 0 0 15px 0;
+    }
+  }
+
+}
+

data/app/assets/stylesheets/admin/components/forms/_searchable_select.scss

@@ -0,0 +1,8 @@
+.searchable-select {
+  min-height: 41px;
+  @include min-width($bpFull) {
+    float: left;
+    width: 79%;
+    max-width: 520px;
+  }
+}

data/app/assets/stylesheets/admin/components/forms/_slug_field.scss

@@ -0,0 +1,20 @@
+.slug-field {
+
+  &-preview {
+    font-family: $fMonospace;
+    font-size: 12px;
+    margin: 0 0 0 0;
+    padding: 6px 8px;
+    background: $cCoolGrey;
+    border-radius: 0 0 2px 2px;
+    border: 1px solid $cGrey;
+    border-top: 0;
+    @include min-width($bpFull) {
+      float: left;
+      width: 79%;
+      max-width: 520px;
+      margin-left: 20%;
+    }
+  }
+
+}

data/app/assets/stylesheets/admin/components/forms/_swatch_field.scss

@@ -0,0 +1,47 @@
+.swatch-field {
+
+  @include clearfix;
+
+  input[type=text] {
+    font-family: $fMonospace;
+    font-size: 16px;
+    width: 9em;
+    float: left;
+    margin: 0 0.5em 0 0;
+  }
+
+  &-swatch {
+    position: relative;
+    display: block;
+    float: left;
+    border: 1px solid $cPlum;
+    border-radius: 1px;
+    width: 39px;
+    height: 39px;
+    background: linear-gradient(135deg, white 48%, #FBA4B4 48%, #FBA4B4 52%, white 52%);
+
+    // Show a 20% light and dark region in the swatch
+    &.-active {
+      &:before {
+        position: absolute;
+        width: 20%;
+        height: 100%;
+        content: "";
+        right: 20%;
+        top: 0;
+        background: white(0.20);
+      }
+      &:after {
+        position: absolute;
+        width: 20%;
+        height: 100%;
+        content: "";
+        right: 0;
+        top: 0;
+        background: black(0.20);
+      }
+    }
+
+  }
+
+}

data/app/assets/stylesheets/admin/components/forms/_timestamp_field.scss

@@ -0,0 +1,15 @@
+.timestamp-field {
+
+  @include clearfix;
+
+  &-selects {
+    display: none;
+  }
+
+  input[type=text] {
+    color: #000;
+    font-family: $fMonospace;
+    font-size: 16px;
+  }
+
+}

data/app/assets/stylesheets/admin/components/help_link.scss

@@ -0,0 +1,6 @@
+.help-link-body {
+  font-size: 16px;
+  max-width: 720px;
+  padding: 20px 0;
+  position: relative;
+}

data/app/assets/stylesheets/admin/mixins/_clearfix.scss

@@ -0,0 +1,18 @@
+// -------------------------------------------------------------------------
+// MICRO CLEARFIX
+// http://nicolasgallagher.com/micro-clearfix-hack/
+// -------------------------------------------------------------------------
+
+@mixin clearfix {
+
+  &:before,
+  &:after {
+    content: " ";
+    display: table;
+  }
+
+  &:after {
+    clear: both;
+  }
+
+}

data/app/assets/stylesheets/admin/mixins/_min_max_width.scss

@@ -0,0 +1,11 @@
+@mixin min-width($size) {
+  @media screen and (min-width: $size) {
+    @content;
+  }
+}
+
+@mixin max-width($size) {
+  @media screen and (max-width: $size) {
+    @content;
+  }
+}

data/app/assets/stylesheets/admin/mixins/_rgbb.scss

@@ -0,0 +1,7 @@
+@function black($opacity) {
+  @return rgba(0,0,0,$opacity);
+}
+
+@function white($opacity) {
+  @return rgba(255,255,255,$opacity);
+}

data/app/assets/stylesheets/admin/mixins/_visuallyhidden.scss

@@ -0,0 +1,33 @@
+// -------------------------------------------------------------------------
+// Various Helpers to Show and Hide Content
+// -------------------------------------------------------------------------
+
+// Undo visuallyhidden styles
+@mixin undo-visuallyhidden {
+  clip: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  position: static;
+  width: auto;
+}
+
+// Hide only visually, but have it available for screenreaders: http://h5bp.com/v
+@mixin visuallyhidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  &.focusable:active,
+  &.focusable:focus {
+    @include undo-visuallyhidden;
+  }
+}
+
+.visuallyhidden {
+  @include visuallyhidden;
+}

data/app/assets/stylesheets/admin/settings/_animations.scss

@@ -0,0 +1,21 @@
+@-webkit-keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+            transform: rotate(359deg);
+  }
+}
+
+@keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+            transform: rotate(359deg);
+  }
+}

data/app/assets/stylesheets/admin/settings/_breakpoints.scss

@@ -0,0 +1,2 @@
+$bpNarrow: 600px;
+$bpFull: 860px;

data/app/assets/stylesheets/admin/settings/_colors.scss

@@ -0,0 +1,32 @@
+$cEggshell: #fcfcfc;
+$cTaupe: #D5D5D7;
+$cPlum: #343242;
+$cBlack: #222222;
+$cThreespotPink: #d21172;
+$cWhite: #fefefe;
+$cGrey: #d8d8d8;
+$cDarkGrey: #777;
+$cCoolGrey: #F7F8F9;
+$cSlate: #4b4f55;
+
+$cRuby: #da3946;
+$cSapphire: #3497be;
+
+$cButtonNeutral: #fcfcfc;
+$cButtonNeutralActive: #fff;
+
+$cButtonPrimary: #00addf;
+$cButtonPrimaryActive: lighten($cButtonPrimary, 3);
+
+$cButtonDanger: #da3946;
+$cButtonDangerActive: lighten($cButtonDanger, 10);
+
+$plumShadow: 0px 1px 0px black(0.5);
+
+@function black($alpha) {
+  @return rgba(0,0,0,$alpha);
+}
+
+@function white($alpha) {
+  @return rgba(255,255,255,$alpha);
+}