tolaria 1.0.0

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

@@ -0,0 +1,68 @@
+.main {
+
+  @include clearfix;
+  background-color: #fff;
+  width: 100%;
+  padding: 0 0 50px 0;
+
+  @include min-width($bpFull) {
+    display: table-cell;
+    border-left: 1px solid black(0.10);
+    padding: 0 0 50px 20px;
+    width: 83.95%;
+  }
+
+}
+
+.main-controls {
+
+  @include clearfix;
+  border-bottom: 3px double $cGrey;
+  clear: both;
+  padding: 15px 0 15px 0;
+  width: 100%;
+
+  &-left {
+    margin: 0 0 5px 0;
+    @include min-width($bpFull) {
+      margin: 0;
+      float: left;
+    }
+  }
+
+  &-right {
+    margin: 15px 0 10px 0;
+    @include min-width($bpFull) {
+      margin: 0;
+      float: right;
+    }
+  }
+
+
+  h1 {
+    font-weight: bold;
+    line-height: 21px;
+    margin: 6px 0 0 0;
+  }
+
+  &.-inverse {
+    border: 0;
+    border-top: 3px double $cGrey;
+    margin: 24px 0 0 0;
+  }
+
+}
+
+.crumb {
+  color: #999;
+  &:after {
+    content: " / ";
+    font-weight: bold;
+  }
+
+  a:link,
+  a:visited {
+    color: #999;
+  }
+}
+

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

@@ -0,0 +1,109 @@
+.markdown-body {
+
+  font-size: 14px;
+  line-height: 1.5;
+
+  .dim {
+    color: #999;
+  }
+
+  * + * {
+    margin-top: 1em;
+  }
+
+  strong {
+    font-weight: bold;
+  }
+
+  em {
+    font-style: italic;
+  }
+
+  a {
+    color: $cSapphire;
+    text-decoration: underline;
+    &:hover, &:active {
+      text-decoration: none;
+    }
+  }
+
+  h1 {
+    font-size: 160%;
+    font-weight: bold;
+  }
+
+  h2 {
+    font-size: 140%;
+    font-weight: bold;
+  }
+
+  h3 {
+    font-size: 120%;
+    font-weight: bold;
+  }
+
+  h4 {
+    font-size: 100%;
+    font-weight: bold;
+    margin-bottom: -1em;
+  }
+
+  h5 {
+    font-size: 100%;
+    font-style: italic;
+    margin-bottom: -1em;
+  }
+
+  blockquote {
+    display: block;
+    color: $cDarkGrey;
+    border-left: 2px solid $cDarkGrey;
+    padding: 0 0 0 0.5em;
+  }
+
+  img {
+    display: block;
+    max-width: 100%;
+  }
+
+  ol li {
+    list-style: decimal;
+    margin: 0 1.5em 0 1.5em;
+  }
+
+  ul li {
+    list-style: square;
+    margin: 0 1.5em 0 1.5em;
+  }
+
+  hr {
+    margin: 1.25em 0 1.25em 0;
+  }
+
+  code, pre {
+    background-color: black(0.04);
+    border-radius: 2px;
+    color: $cPlum;
+    font-family: $fMonospace;
+    font-size: 14px;
+  }
+
+  pre {
+    display: block;
+    padding: 1em;
+    max-width: 100%;
+    overflow-x: scroll;
+    overflow-y: visible;
+  }
+
+  code {
+    margin: 0;
+    padding: 0.1em 0.2em 0.1em 0.2em;
+  }
+
+  pre > code {
+    background: none;
+    padding: 0;
+  }
+
+}

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

@@ -0,0 +1,110 @@
+.navigation {
+
+  position: relative;
+  z-index: 99999;
+
+  @include max-width($bpFull - 1px) {
+    @include clearfix;
+
+    background-color: $cCoolGrey;
+    border-bottom: 3px double $cGrey;
+    margin-left: -20px;
+    margin-right: -20px;
+    padding: 10px 20px 20px 20px;
+
+    .js & {
+      left: 0;
+      margin: 0;
+      position: absolute;
+      width: 100%;
+
+      -webkit-transition: -webkit-transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
+              transition: transform 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
+
+      -webkit-transform: translateY(-100%);
+              transform: translateY(-100%);
+
+      &.-open {
+        -webkit-transform: translateY(0);
+                transform: translateY(0);
+      }
+    }
+  }
+
+  @include min-width($bpFull) {
+    width: 16%;
+    border-bottom: 0;
+    padding: 0;
+    display: table-cell;
+    vertical-align: top;
+  }
+
+}
+
+.navigation-group {
+
+  margin-top: 10px;
+
+  @include min-width(500px) {
+    width: 50%;
+    float: left;
+
+    &:nth-child(odd) {
+      clear: left;
+    }
+  }
+
+  @include min-width($bpFull) {
+    width: auto;
+    float: none;
+  }
+
+  h3 {
+    @include clearfix;
+    @extend %helvetica;
+    display: block;
+    font-size: 11px;
+    line-height: 26px;
+    padding: 0 0 0 3px;
+    text-transform: uppercase;
+    color: #999;
+  }
+
+  li {
+
+    @include clearfix;
+    display: block;
+    line-height: 28px;
+
+    .icon {
+      color: $cPlum;
+      margin: 0 5px 0 2px;
+      text-shadow: none;
+    }
+
+    a {
+      transition: color 200ms;
+      color: #555;
+      display: block;
+      font-size: 14px;
+      padding: 0 8px 0 0;
+      text-shadow: 1px 1px 0px white(0.5);
+
+      .icon {
+        transition: color 200ms;
+      }
+
+      &:hover, &:active,
+      &.current {
+        color: $cThreespotPink;
+        text-shadow: none;
+        .icon {
+          color: $cThreespotPink;
+        }
+      }
+
+    }
+
+  }
+
+}

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

@@ -0,0 +1,36 @@
+.pagination {
+
+  margin-top: 20px;
+  float: right;
+
+  &-desc {
+    display: none;
+    @include min-width(990px) {
+      display: block;
+      color: #BBB;
+      float: left;
+      font-size: 14px;
+      line-height: 16px;
+      border: 1px solid $cTaupe;
+      margin: 20px 0 0 0;
+      border-radius: 2px;
+      padding: 7px 14px 7px 12px;
+    }
+  }
+
+  .-page {
+    display: none;
+    @include min-width($bpFull) {
+      display: inline-block;
+    }
+  }
+
+  li {
+    display: inline;
+  }
+
+  a {
+    display: inline-block;
+  }
+
+}

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

@@ -0,0 +1,11 @@
+.pill {
+  background-color: $cPlum;
+  border-radius: 2px;
+  color: $cWhite;
+  display: inline-block;
+  font-size: 11px;
+  font-weight: bold;
+  line-height: 11px;
+  padding: 3px 7px 4px 7px;
+  text-transform: uppercase;
+}

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

@@ -0,0 +1,222 @@
+.resource-form {
+
+  &-interior {
+    @include clearfix;
+    padding: 18px 0 0 0;
+  }
+
+  label {
+
+    display: block;
+    margin: 25px 0 5px 0;
+    font-size: 14px;
+    font-weight: bold;
+    line-height: 1.25;
+    color: $cPlum;
+    margin: 0 0 10px 0;
+    clear: left;
+
+    @include min-width($bpFull) {
+      float: left;
+      width: 20%;
+      display: block;
+      clear: left;
+      line-height: 1.25;
+      padding: 0;
+      margin: 11px 0 10px 0;
+    }
+
+  }
+
+  input[type=color],
+  input[type=datetime-local],
+  input[type=datetime],
+  input[type=date],
+  input[type=email],
+  input[type=number],
+  input[type=password],
+  input[type=range],
+  input[type=search],
+  input[type=telephone],
+  input[type=tel],
+  input[type=text],
+  input[type=time],
+  input[type=url],
+  select,
+  textarea {
+
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -ms-appearance: none;
+    appearance: none;
+    background: #fefefe;
+    border-radius: 2px;
+    border: 1px solid $cTaupe;
+    color: $cPlum;
+    display: block;
+    font-size: 16px;
+    font-family: $fHelvetica;
+    line-height: 21px;
+    padding: 8px 10px;
+    transition: background-color 100ms linear, border-color 100ms linear;
+    width: 100%;
+
+    @include min-width($bpFull) {
+      float: left;
+      width: 79%;
+      max-width: 520px;
+    }
+
+    &:focus {
+      background-color: #fff;
+      border-bottom-color: $cSapphire;
+      border-color: darken($cSapphire, 10);
+      border-right-color: $cSapphire;
+      outline: none;
+    }
+
+  }
+
+  .field-cluster {
+
+    @include clearfix;
+    display: block;
+    width: 100%;
+
+    input[type=checkbox] {
+
+      border-radius: 2px;
+      border: 1px solid $cTaupe;
+      clear: left;
+      color: $cPlum;
+      float: left;
+      height: 30px;
+      margin: 4px 15px 4px 0;
+      transition: border 100ms linear;
+      width: 30px;
+
+      &:focus, &:hover {
+        border-color: $cPlum;
+      }
+
+      &:checked {
+        border-color: $cSapphire;
+        background-color: #fff;
+      }
+
+      &:checked:before {
+        color: $cSapphire;
+        content: "\2714\FE0E";
+        display: block;
+        height: 28px;
+        line-height: 28px;
+        text-align: center;
+        width: 28px;
+      }
+
+    }
+
+    label {
+      width: 50%;
+      width: calc(100% - 50px);
+      float: left;
+      clear: none;
+      margin: 10px 0 0 0;
+      font-weight: bold;
+    }
+
+    select {
+      width: auto;
+      min-width: 20%;
+      float: left;
+      margin-right: 4px;
+    }
+
+    @include min-width($bpFull) {
+      float: left;
+      width: 79%;
+      max-width: 520px;
+    }
+
+  }
+
+  input[type=text]::-ms-clear { display: none; width : 0; height: 0; }
+  input[type=text]::-ms-reveal { display: none; width : 0; height: 0; }
+
+  input[type="search"]::-webkit-search-decoration,
+  input[type="search"]::-webkit-search-cancel-button,
+  input[type="search"]::-webkit-search-results-button,
+  input[type="search"]::-webkit-search-results-decoration {
+    display: none;
+  }
+
+  select {
+    background-image: image-url("admin/select_arrows.svg");
+    background-position: right 10px center;
+    background-repeat: no-repeat;
+    background-size: 10px 10px;
+    padding-right: 20px;
+    &[multiple] {
+      background-image: none;
+      height: 43px;
+    }
+  }
+
+  .hint {
+    color: #888;
+    display: block;
+    font-size: 12px;
+    font-style: italic;
+    line-height: 1.25;
+
+    margin: 12px 0 15px 0;
+    width: 100%;
+    border-bottom: 1px dashed black(0.1);
+    padding: 0 0 10px 0;
+
+    &:last-child {
+      margin-bottom: 0;
+      border-bottom: 0;
+      padding-bottom: 0;
+    }
+
+    span {
+      display: block;
+      max-width: 520px;
+    }
+
+    @include min-width($bpFull) {
+      clear: both;
+      float: right;
+      padding: 0 0 10px 20%;
+      margin: 10px 0 15px 0;
+    }
+  }
+
+  hr {
+    height: 0;
+    border: 0;
+    border-top: 3px double $cGrey;
+    margin: 20px 0 20px 0;
+    width: 100%;
+    @include min-width($bpFull) {
+      float: left;
+      clear: both;
+    }
+  }
+
+  input::-webkit-input-placeholder {color: #ccc}
+  input:-moz-placeholder {color: #ccc}
+  input::-moz-placeholder {color: #ccc}
+  input:-ms-input-placeholder {color: #ccc}
+
+  .field_with_errors {
+    input, textarea, select,
+    button {
+      border: 1px solid darken($cRuby, 10);
+      border-bottom-color: $cRuby;
+      border-right-color: $cRuby;
+    }
+  }
+
+}