ghost-manager 0.0.1 → 1.0.0

data/magneto/source/assets/stylesheets/application.css.sass

@@ -0,0 +1 @@
+@import 'interface/base'

data/magneto/source/assets/stylesheets/interface/_base.scss

@@ -0,0 +1,20 @@
+@import '../bower_components/normalize-css/normalize';
+@import '../bower_components/modular-scale/stylesheets/modular-scale';
+@import '../bower_components/compass-mixins/lib/compass/typography/vertical_rhythm';
+@import '../bower_components/susy/sass/susy';
+@import 'functions';
+@import 'mixins';
+@import 'variables';
+@import 'grid';
+@import 'buttons';
+@import 'typography';
+@import 'dropdowns';
+@import 'lists';
+@import 'forms';
+@import 'icons';
+@import 'plans';
+@import 'flashes';
+@import 'states';
+@import 'tables';
+@import 'navigations/navigations';
+// @import 'footer';

data/magneto/source/assets/stylesheets/interface/_buttons.scss

@@ -0,0 +1,25 @@
+// Buttons
+%button {
+  padding: 0.9em 2em;
+  display: inline-block;
+  font-size: $button-font-size;
+  font-weight: $button-font-weight;
+  color: $button-color;
+  background-color: $button-background-color;
+  border: $button-border $button-border-color;
+  border-radius: $round-edges;
+  transition: background-color 300ms ease-out;
+  user-select: none;
+  cursor: pointer;
+  outline: none;
+
+  &:hover {
+    color: $button-color-hover;
+    background-color: $button-background-color-hover;
+    border: $button-border-color-hover;
+  }
+}
+
+.button, input[type="submit"] {
+  @extend %button;
+}

data/magneto/source/assets/stylesheets/interface/_dropdowns.scss

@@ -0,0 +1,56 @@
+// Hoverable area for dropdown
+%drop-down {
+  display: inline-block;
+  position: relative;
+
+  &:hover {
+    color: $dropdown-color-hover;
+  }
+}
+
+// Dropdown list
+%drop-down-list {
+  display: none;
+  position: absolute;
+  top: 50%;
+
+  > * {
+    padding: 0.25em;
+    width: 10rem;
+    color: $dropdown-color;
+    background-color: $dropdown-background-color;
+    text-align: center;
+
+    &:hover {
+      color: $dropdown-color-hover;
+      background-color: scale_color($dropdown-background-color, $lightness: 5%);
+    }
+  }
+
+  * {
+    &:first-of-type {
+      border-radius: $round-edges $round-edges 0 0;
+    }
+
+    &:last-of-type {
+      border-radius: 0 0 $round-edges $round-edges;
+    }
+  }
+}
+
+.drop-down {
+  @extend %drop-down;
+
+  &:hover {
+    .drop-down-list {
+      padding-top: 1em;
+      display: block;
+      z-index: 100;
+    }
+  }
+}
+
+.drop-down-list {
+  @extend %drop-down-list;
+}
+

data/magneto/source/assets/stylesheets/interface/_flashes.scss

@@ -0,0 +1,29 @@
+.alert-box {
+  margin-bottom: 0;
+  display: none;
+
+  &.alert {
+    background-color: $alert-background-color;
+    border: 1px solid $alert-border-color;
+  }
+
+  &.success {
+    background-color: $success-background-color;
+    border: 1px solid $success-border-color;
+  }
+
+  &.warning {
+    background-color: $warning-background-color;
+    border: 1px solid $warning-border-color;
+  }
+
+  .alert-box-content {
+    opacity: 0.0;
+  }
+
+  .close-button {
+    color: $close-color;
+    opacity: 0.6;
+  }
+
+}

data/magneto/source/assets/stylesheets/interface/_footers.scss

@@ -0,0 +1,79 @@
+footer {
+  padding: 0 1em;
+  background-color: $dark-gray;
+
+  .site-map {
+    @include container(100em);
+    padding: 2.25em 0 adjust-leading(2.25em) 0;
+    border-bottom: 1px solid $light-gray;
+
+    ul {
+      float: left;
+    }
+
+    li {
+      display: inline-block;
+      margin-right: 3em;
+
+      &:nth-of-type(5) a {
+        color: $dark-blue;
+      }
+    }
+
+    .contact {
+      float: right;
+      color: white;
+
+      a {
+        font-weight: 400;
+      }
+    }
+  }
+
+  .copyright {
+    @include container(100em);
+    padding: 1.5em 0;
+
+    p {
+      margin: 0;
+      color: white;
+    }
+  }
+
+  @media only screen and (max-width: 767px) {
+    .site-map {
+      li {
+        margin-bottom: 1.5em;
+        display: block;
+        text-align: left;
+      }
+
+      .contact {
+        text-align: left;
+      }
+    }
+  }
+
+  @media only screen and (min-width: 768px) and (max-width: 800px) {
+    .site-map {
+      li {
+        margin: 0 0.75em;
+      }
+    }
+  }
+
+  @media only screen and (max-width: 1024px) {
+    .site-map {
+      text-align: center;
+
+      ul {
+        float: none;
+        margin-bottom: 1.5em;
+      }
+
+      .contact {
+        float: none;
+      }
+    }
+  }
+}

data/magneto/source/assets/stylesheets/interface/_forms.scss

@@ -0,0 +1,72 @@
+// Forms
+%input {
+  margin: 0.425em 0;
+  padding: 0.45em;
+  display: block;
+  color: $form-color;
+  background-color: $form-background-color;
+  border: 1px solid $form-border-color;
+  box-shadow: $form-box-shadow;
+  border-radius: $round-edges;
+  outline: none;
+
+  &:hover {
+    border: 1px solid $form-border-color-hover;
+  }
+
+  &:focus {
+    box-shadow: $form-box-shadow;
+    background-color: $form-background-color-focus;
+  }
+
+  &::-webkit-input-placeholder {
+    color: $placeholder-text-color;
+  }
+
+  &:-moz-placeholder {
+    color: $placeholder-text-color;
+  }
+
+  &::-moz-placeholder {
+    color: $placeholder-text-color;
+  }
+
+  &:-ms-input-placeholder {
+    color: $placeholder-text-color;
+  }
+}
+
+input[type="text"],
+input[type="password"],
+input[type="date"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="month"],
+input[type="week"],
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="tel"],
+input[type="time"],
+input[type="url"],
+input[type="color"],
+select,
+textarea {
+  @extend %input;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+  margin-right: 1em;
+}
+
+label {
+  display: block;
+  font-weight: $label-weight;
+  font-size: rem-calc(15);
+  color: $label-color;
+
+  abbr {
+    display: none;
+  }
+}

data/magneto/source/assets/stylesheets/interface/_functions.scss

@@ -0,0 +1,42 @@
+// It strips the unit of measure and returns it
+@function strip-unit($value) {
+  @return $value / ($value * 0 + 1);
+}
+
+// Converts value to rem
+@function rem-calc($value, $base-value: $base-font-size)  {
+  $value: strip-unit($value) / strip-unit($base-value) * 1rem;
+
+  @if ($value == 0rem) {
+    $value: 0;
+  }
+  @return $value;
+}
+
+// Calculate line height
+@function line-height($font-size: $base-font-size, $line-height: $base-line-height) {
+  @return (strip-unit($line-height) / strip-unit($font-size)) * 1rem;
+}
+
+
+// Leading adjusted for borders
+@function adjust-leading($leading: $base-line-height, $operator: 'subtract', $value: 1px) {
+  $from-unit: unit($leading);
+  $px-leading: $leading;
+
+  @if $leading != 'px' {
+    @if $from-unit == 'em' {
+      $px-leading: $leading * $base-font-size / 1em
+    } @else if $from-unit == 'rem' {
+      $px-leading: $leading * $base-font-size / 1rem
+    }
+  }
+
+  @if $operator == 'subtract' {
+    $leading: (strip-unit($px-leading) - strip-unit($value)) / strip-unit($base-font-size) * 1em;
+  } @else if 'add' {
+    $leading: (strip-unit($px-leading) + strip-unit($value)) / strip-unit($base-font-size) * 1em;
+  }
+
+  @return $leading;
+}

data/magneto/source/assets/stylesheets/interface/_grid.scss

@@ -0,0 +1,31 @@
+// Susy Default Grid
+$susy: (
+  flow: ltr,
+  math: fluid,
+  output: float,
+  gutter-position: after,
+  container: auto,
+  container-position: center,
+  columns: 12,
+  gutters: .25,
+  column-width: 70px,
+  global-box-sizing: border-box,
+  last-flow: to,
+  debug: (
+    image: hide,
+    color: rgba(#E74C3C, .25),
+    output: background,
+    toggle: top right,
+  ),
+  use-custom: (
+    background-image: true,
+    background-options: false,
+    box-sizing: true,
+    clearfix: false,
+    rem: true,
+  )
+);
+
+main {
+  overflow: hidden;
+}

data/magneto/source/assets/stylesheets/interface/_icons.scss

@@ -0,0 +1,12 @@
+// Icons
+i {
+  font-family: FontAwesome;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1rem;
+  color: $icon-color;
+
+  &:hover {
+    color: $icon-color-hover;
+  }
+}

data/magneto/source/assets/stylesheets/interface/_lists.scss

@@ -0,0 +1,37 @@
+// Lists
+ul, ol, dl {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  outline: none;
+}
+
+li {
+  display: block;
+}
+
+dl {
+  dt {
+    font-weight: bold;
+  }
+
+  dd {
+    margin: 0;
+  }
+}
+
+.index-container {
+  .list-item {
+    padding: 1em 0;
+    background-color: $list-item-background-color;
+
+    &:nth-child(even) {
+      background-color: $list-item-background-color-odd;
+    }
+  }
+
+  .button {
+    @extend %button;
+    margin-right: 1em;
+  }
+}

data/magneto/source/assets/stylesheets/interface/_mixins.scss

@@ -0,0 +1,19 @@
+// Button Mixin
+@mixin button($button-color, $button-background-color) {
+  color: $button-color;
+  background-color: $button-background-color;
+
+  &:hover {
+    color: scale_color($button-color, $lightness: -20%);
+    background-color: scale_color($button-background-color, $lightness: -20%);
+  }
+}
+
+// Icon Mixin
+@mixin icon($icon-color, $icon-color-hover) {
+  color: $icon-color;
+
+  &:hover {
+    color: $icon-color-hover;
+  }
+}

data/magneto/source/assets/stylesheets/interface/_plans.scss

@@ -0,0 +1,52 @@
+// Plans
+%plan {
+  ul {
+    background-color: $plan-background-color;
+    color: $plan-color;
+    text-align: center;
+    border-radius: $round-edges;
+  }
+
+  .title {
+    padding: 1rem 0;
+    background-color: $plan-title-background-color;
+    font-size: $plan-title-font-size;
+    border-radius: $round-edges;
+  }
+
+  .price {
+    padding: 1.5rem 0;
+    font-size: $plan-price-font-size;
+    background-color: $plan-price-background-color;
+
+    span {
+      font-size: 1.25rem;
+      font-weight: 100;
+
+      &.money-symbol {
+        position: relative;
+        top: -1.7em;
+        right: -0.8em;
+      }
+
+      &.month-text {
+        position: relative;
+        left: -0.8em;
+      }
+    }
+  }
+
+  .feature {
+    padding: 0.75em 0;
+  }
+
+  .button {
+    @extend %button;
+    margin: 1.2em 0 1.6em 0;
+  }
+}
+
+.plan {
+  @extend %plan;
+  width: 20em;
+}

data/magneto/source/assets/stylesheets/interface/_states.scss

@@ -0,0 +1,24 @@
+%state {
+  width: 10em;
+  padding: 0.5em 0;
+  font-weighT: 600;
+  font-size: 0.875em;
+  color: $state-color;
+  border-radius: $round-edges;
+  text-align: center;
+}
+
+li.state-green  {
+  @extend %state;
+  background-color: $state-green-background-color;
+}
+
+li.state-yellow {
+  @extend %state;
+  background: $state-yellow-background-color;
+}
+
+li.state-red {
+  @extend %state;
+  background: $state-red-background-color;
+}

data/magneto/source/assets/stylesheets/interface/_tables.scss

@@ -0,0 +1,33 @@
+// Tables
+table {
+  width: 100%;
+  table-layout: fixed;
+}
+
+th {
+  padding: 0.7em 3em;
+  color: $table-header-color;
+  border-bottom: 2px solid $gray;
+  text-align: left;
+  font-family: $header-font-family;
+  font-weight: 600;
+}
+
+td {
+  padding: 1.5em 3em;
+  color: $table-color;
+  text-align: left;
+}
+
+tr {
+  &:nth-child(odd) {
+    background-color: $table-odd-background-color;
+  }
+
+  &:nth-child(even) {
+    background-color: $table-even-background-color;
+  }
+}
+
+
+

data/magneto/source/assets/stylesheets/interface/_typography.scss

@@ -0,0 +1,117 @@
+// Establish Baseline
+html {
+  font-size: ($base-font-size / 16px) * 100%;
+}
+
+body {
+  line-height: line-height();
+}
+
+// Links
+a {
+  font-family: $header-font-family;
+  font-weight: 700;
+  color: $link-color;
+  text-decoration: none;
+
+  &:hover {
+    color: $link-color-hover;
+  }
+
+  &.active {
+    color: $link-color-active;
+  }
+}
+
+// Typographic Tags
+body {
+  font-family: $font-family;
+  font-weight: $font-weight;
+  color: $font-color;
+  background-color: $body-background-color;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  font-family: $header-font-family;
+  font-weight: $header-font-weight;
+  color: $header-font-color;
+}
+
+p {
+  margin: 1.5rem 0;
+  font-family: $font-family;
+  font-weight: $font-weight;
+  color: $font-color;
+}
+
+hr {
+  border-bottom: 1px solid $border-color;
+  border-left: none;
+  border-right: none;
+  border-top: none;
+}
+
+blockquote {
+  margin: 1em 0;
+  padding: 0.5em 0 0.5em 1em;
+  color: scale_color($font-color, $lightness: 15%);
+  border-left: 3px solid $border-color;
+}
+
+cite {
+  font-style: italic;
+  color: scale_color($font-color, $lightness: 30%);
+
+  &:before {
+    content: '\2014 \00A0';
+  }
+}
+
+// Modular Scale
+$typographic-element: (
+  h1: (
+    $ms-up-3,
+    $ms-small-up-3
+  ),
+
+  h2: (
+    $ms-up-2,
+    $ms-small-up-2
+  ),
+
+  h3: (
+    $ms-up-1
+    $ms-small-up-1
+  ),
+
+  h4: (
+    $ms-up,
+    $ms-small-up
+  ),
+
+  h5: (
+    $ms-base,
+    $ms-base
+  ),
+
+  h6: (
+    $ms-down,
+    $ms-small-down
+  ),
+
+  p: (
+    $ms-base,
+    $ms-small-base
+  ),
+);
+
+@each $element, $size in $typographic-element {
+  #{$element} {
+    @include adjust-font-size-to( nth($size, 1) );
+
+    @media only screen and (max-width: 1024px) {
+      @include adjust-font-size-to( nth($size, 2) );
+    }
+  }
+}