formadmin 0.1.2

data/app/assets/stylesheets/formadmin/components/_table.scss

@@ -0,0 +1,167 @@
+table.index_table {
+  @extend %box;
+  background-color: $white;
+  border-collapse: separate;
+  width: 100%;
+
+  .centralized {
+    text-align: center;
+  }
+
+  tr:last-child {
+    td:first-child {
+      border-bottom-left-radius: $radius;
+    }
+
+    td:last-child {
+      border-bottom-right-radius: $radius;
+    }
+  }
+
+  th,
+  td {
+    padding: 12px 15px;
+    text-align: left;
+    vertical-align: middle;
+
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  thead th {
+    @extend %header;
+    border: 1px solid $silver;
+    border-width: 0 1px 1px 0;
+    vertical-align: bottom;
+
+    &:first-child {
+      border-top-left-radius: $radius;
+    }
+
+    &:last-child {
+      border-top-right-radius: $radius;
+    }
+
+    &:only-child {
+      border-radius: $radius $radius 0 0;
+    }
+
+    &.sortable a {
+      background: asset-url('active_admin/orderable.png') 0 6px no-repeat;
+      display: block;
+      padding-left: 12px;
+    }
+
+    &.sorted-asc,
+    &.sorted-desc {
+      background-color: shade($white, 10%);
+      background-image: linear-gradient(to bottom, shade($white, 10%), shade($white, 15%));
+    }
+
+    &.sorted-asc a {
+      background-position: 0 -25px;
+    }
+
+    &.sorted-desc a {
+      background-position: 0 -55px;
+    }
+
+    a {
+      text-decoration: none;
+    }
+  }
+
+  tbody {
+    tr {
+      &:nth-child(even) td {
+        background-color: shade($white, 2.5%);
+      }
+
+      &:hover td {
+        background-color: shade($white, 5%);
+      }
+
+      &:last-child td {
+        border-bottom: none;
+      }
+
+      &.selected td {
+        background-color: tint($yellow, 90%);
+      }
+    }
+
+    td {
+      background-color: $white;
+      border: 1px solid tint($silver, 35%);
+      border-width: 0 1px 1px 0;
+      transition: background 250ms;
+    }
+  }
+
+  .member_link {
+    background-image: asset-url('active_admin/actions.png');
+    display: inline-block;
+    height: 13px;
+    margin-right: 7px;
+    opacity: 0.75;
+    position: relative;
+    text-indent: -99999px;
+    top: 5px;
+    transition: all 250ms;
+    white-space: nowrap;
+    width: 16px;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  .view_link {
+    background-position: -16px 0;
+  }
+
+  .edit_link {
+    background-position: -32px 0;
+  }
+
+  .delete_link {
+    background-position: -48px 0;
+  }
+}
+
+// Resource Attributes Table
+.attributes_table {
+  overflow: hidden;
+
+  table {
+    width: 100%;
+  }
+
+  th,
+  td {
+    padding: 8px 0;
+    text-align: left;
+  }
+
+  th {
+    width: 200px;
+  }
+
+  tr + tr {
+    th,
+    td {
+      border-top: 1px solid tint($silver, 50%);
+    }
+  }
+
+  .empty {
+    font-size: 12px;
+    opacity: 0.5;
+    text-transform: uppercase;
+  }
+}
+
+.attributes_table table {
+
+}

data/app/assets/stylesheets/formadmin/components/_tabs.scss

@@ -0,0 +1,42 @@
+.tabs {
+  .nav-tabs {
+    @extend %header;
+    border: 1px solid $silver;
+    border-top-left-radius: $radius;
+    border-top-right-radius: $radius;
+    padding: 6px 15px 0;
+
+    @include clearfix;
+
+    li {
+      float: left;
+      padding: 9px 16px;
+      transition: background-color 250ms;
+
+      &:not(:first-of-type):not(.ui-tabs-active) {
+        border-left: 1px solid rgba($silver, 0.5);
+      }
+
+      &.ui-tabs-active {
+        background-color: shade($white, 2.5%);
+        border: 1px solid $silver;
+        border-bottom-width: 0;
+        border-radius: $radius $radius 0 0;
+        font-weight: bold;
+        margin-bottom: -1px;
+        padding: 9px 15px;
+      }
+
+      a {
+        outline: none;
+        text-decoration: none;
+      }
+    }
+  }
+
+  .ui-tabs-panel > fieldset.inputs {
+    border-top: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+}

data/app/assets/stylesheets/formadmin/components/_tools.scss

@@ -0,0 +1,68 @@
+.table_tools {
+  margin-bottom: 20px;
+  @include clearfix;
+
+  .dropdown_menu {
+    margin-right: 20px;
+    float: left;
+  }
+
+  // Scopes
+  .scopes {
+    float: left !important;
+    width: auto !important;
+  }
+
+  .scopes {
+    background-color: $white;
+    border: 1px solid $silver;
+    border-radius: $radius;
+    box-shadow: 0 0 5px rgba($black, 0.05);
+    font-size: 14px;
+    list-style: none;
+    margin: 0;
+    overflow: hidden;
+    padding: 0;
+
+    @include clearfix;
+  }
+
+  .scope {
+    float: left;
+    font-weight: bold;
+    text-align: center;
+
+    &.selected a {
+      background-color: $white;
+      background-image: linear-gradient(to bottom, shade($white, 5%), $white);
+      color: $black;
+
+      .count {
+        opacity: 0.75;
+      }
+    }
+
+    a {
+      background-color: $white;
+      background-image: linear-gradient(to bottom, $white, shade($white, 5%));
+      box-shadow: inset 0 1px 0 0 $white;
+      display: block;
+      padding: 12px 16px;
+      text-decoration: none;
+    }
+
+    &:not(.selected) a:hover {
+      background: $white;
+    }
+
+    .count {
+      font-weight: normal;
+      letter-spacing: -1px;
+      opacity: 0.5;
+    }
+
+    + .scope {
+      border-left: 1px solid $silver;
+    }
+  }
+}

data/app/assets/stylesheets/formadmin/components/_unsupported_browser.scss

@@ -0,0 +1,12 @@
+.unsupported_browser {
+  padding: 10px 30px;
+  background-color: tint($yellow, 90%);
+  background-image: linear-gradient(to bottom, tint($yellow, 90%), tint($yellow, 80%));
+  border-bottom: 3px solid $yellow;
+  margin: 50px 0 -50px;
+  text-align: center;
+
+  h1 {
+    font-weight: bold;
+  }
+}

data/app/assets/stylesheets/formadmin/core/_animations.scss

@@ -0,0 +1,25 @@
+@keyframes fade-in {
+  0%  {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes scale-up {
+  0%  {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

data/app/assets/stylesheets/formadmin/core/_core.scss

@@ -0,0 +1,44 @@
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  min-height: 100%;
+}
+
+body {
+  background-color: $background-color;
+  color: $text-color;
+  font: $font-weight $font-size $font-family;
+  font-smoothing: $font-smoothing;
+}
+
+a {
+  color: inherit;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font: $header-font-weight 1em $header-font-family;
+  line-height: $header-line-height;
+}
+
+::selection {
+  background-color: $highlight-background;
+  color: $highlight-color;
+}
+
+//
+#wrapper {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  width: 100%;
+}

data/app/assets/stylesheets/formadmin/core/_mixins.scss

@@ -0,0 +1,15 @@
+@mixin clearfix {
+  &:after {
+    clear: both;
+    content: '';
+    display: table;
+  }
+}
+
+@function tint($color, $percent){
+  @return mix(white, $color, $percent);
+}
+
+@function shade($color, $percent){
+  @return mix(black, $color, $percent);
+}

data/app/assets/stylesheets/formadmin/core/_reset.scss

@@ -0,0 +1,227 @@
+/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
+
+html {
+  font-family: sans-serif;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+}
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+template,
+[hidden] {
+  display: none;
+}
+
+a {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+}
+
+a:active,
+a:hover {
+  outline-width: 0;
+}
+
+abbr[title] {
+  border-bottom: none;
+  text-decoration: underline;
+  text-decoration: underline dotted;
+}
+
+b,
+strong {
+  font-weight: inherit;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+dfn {
+  font-style: italic;
+}
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+mark {
+  background-color: #ff0;
+  color: #000;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+img {
+  border-style: none;
+}
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+figure {
+  margin: 1em 40px;
+}
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+  margin: 0;
+}
+
+optgroup {
+  font-weight: bold;
+}
+
+button,
+input {
+  overflow: visible;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+button,
+html [type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+legend {
+  box-sizing: border-box;
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  white-space: normal;
+}
+
+textarea {
+  overflow: auto;
+}
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-input-placeholder {
+  color: inherit;
+  opacity: 0.54;
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}

data/app/assets/stylesheets/formadmin/core/_settings.scss

@@ -0,0 +1,94 @@
+//******************//
+//     Settings     //
+//******************//
+
+//-----------------//
+//   Breakpoints   //
+//-----------------//
+@function screen($breakpoints) {
+  $query: "only screen";
+  @each $property, $value in $breakpoints {
+    $query: "#{$query} and (#{$property}: #{$value})";
+  }
+
+  @return "#{$query}";
+}
+
+//--- Breakpoints ---//
+$phone-breakpoint:   480px;
+$tablet-breakpoint:  768px;
+
+//--- Page Width ---//
+$minimum-page-width: 320px;
+$maximum-page-width: 1080px;
+
+//--- Screens ---//
+$phone-screen:              screen((max-width: $phone-breakpoint));
+$tablet-screen:             screen((min-width: $phone-breakpoint + 1, max-width: $tablet-breakpoint));
+$desktop-screen:            screen((min-width: $tablet-breakpoint + 1));
+$phone-and-tablet-screen:   screen((max-width: $tablet-breakpoint));
+$tablet-and-desktop-screen: screen((min-width: $tablet-breakpoint));
+
+//--- Others Screens ---//
+$phone-to-tablet-screen:    screen((min-width: $phone-breakpoint + 1, max-width: $tablet-breakpoint - 1));
+$tablet-to-desktop-screen:  screen((min-width: $tablet-breakpoint + 1, max-width: $maximum-page-width - 1));
+$largest-phone-screen:      screen((max-width: $tablet-breakpoint - 1));
+$largest-tablet-screen:     screen((max-width: $maximum-page-width - 1));
+
+
+//-----------//
+//   Fonts   //
+//-----------//
+$font-smoothing: antialiased;
+
+//--- Page ---//
+$font-size:   16px;
+$font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+$font-weight: normal;
+$line-height: 1.5;
+
+//--- Header ---//
+$header-font-family: $font-family;
+$header-font-weight: bold;
+$header-line-height: 1.3;
+
+
+//------------//
+//   Colors   //
+//------------//
+
+$blue:   #005fb2;
+$green:  #04844b;
+$red:    #a61a14;
+$yellow: #ffb75d;
+
+//--- Gray Scale ---//
+$white:  #ffffff;
+$silver: #cccccc;
+$gray:   #3f3f3f;
+$black:  #000000;
+
+//--- Emotive ---//
+$positive-color: $green;
+$negative-color: $red;
+$info-color:     $blue;
+$warning-color:  $yellow;
+
+//--- Theme ---//
+$primary-color:   #4d5256;
+$secondary-color: $silver;
+
+//--- Page ---//
+$background-color: #eeeeee;
+$text-color:       $gray;
+
+//--- Highlighting ---//
+$highlight-background: rgba($primary-color, 0.5);
+$highlight-color:      $white;
+
+
+//-------------//
+//   Borders   //
+//-------------//
+$radius:          4px;
+$circular-radius: 500rem;

data/app/assets/stylesheets/formadmin/layouts/_footer.scss

@@ -0,0 +1,14 @@
+.footer {
+  background-color: $white;
+  border-top: 1px solid $silver;
+  box-shadow: 0 0 10px rgba($black, 0.1);
+  font-size: 12px;
+  line-height: 1;
+  margin-top: 20px;
+  padding: 20px 30px;
+  text-align: center;
+
+  p {
+    margin: 0;
+  }
+}