formadmin 0.1.2

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 37e4ae4e413c83d7cb1489487900518f0f36a07b
+  data.tar.gz: 67967f9a5c589d4a63c9d566f0bf7dbf92485af2
+SHA512:
+  metadata.gz: 12c8be48e16a3f3f84ba21c162e3b6dec61f929faaf2db003637e9e72ea049551819cbdd65bf9eef41e9e3160e8c6241a274e10e99a65ee35fd0ba4cbe46e76c
+  data.tar.gz: 9a2b5e47d4464c7587563550c04ab23f080d4e2cc4b891a78779d757ec6354316a3e391cd7c2bfdc6589ec0ba28d3865dddf9a21fa25140cd87543e8217b0d04

data/.gitignore

@@ -0,0 +1,45 @@
+################
+#   Defaults   #
+################
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/
+
+####################
+#   OS & Editors   #
+####################
+._*
+.cache
+.DS_Store
+.idea
+.project
+.settings
+.tmproj
+*.esproj
+*.sublime-project
+*.sublime-workspace
+nbproject
+Thumbs.db
+
+
+
+##############
+#   Others   #
+##############
+*.diff
+*.err
+*.log
+*.orig
+*.rej
+*.sass-cache
+*.swo
+*.swp
+*.vi
+*.zip
+*~

data/Gemfile

@@ -0,0 +1,2 @@
+source 'https://rubygems.org'
+gemspec

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Caio Tarifa
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,40 @@
+# Formadmin
+
+Modern theme for Active Admin used by Formaweb.
+
+## Installation
+
+1. Please make sure that you are using Active Admin from their Github repo:
+
+```
+gem 'activeadmin', github: 'activeadmin/activeadmin'
+```
+
+2. Add this gem in your `Gemfile`:
+
+```
+gem 'formadmin'
+```
+
+3. So, bundle...
+
+```
+$ bundle install
+```
+
+## Usage
+
+All you have to do is change your `assets/stylesheets/active_admin.scss`:
+
+Instead loading defaults...
+
+```
+@import 'active_admin/mixins';
+@import 'active_admin/base';
+```
+
+...load Formadmin:
+
+```
+@import 'formadmin/formadmin';
+```

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/app/assets/stylesheets/formadmin/_formadmin.scss

@@ -0,0 +1,11 @@
+@import 'core/settings',
+        'core/mixins',
+
+        'core/animations',
+        'core/reset',
+        'core/core',
+
+        'atoms/*',
+        'layouts/*',
+        'components/*',
+        'pages/*';

data/app/assets/stylesheets/formadmin/atoms/_box.scss

@@ -0,0 +1,6 @@
+%box {
+  background-color: shade($white, 2.5%);
+  border: 1px solid $silver;
+  border-radius: $radius;
+  box-shadow: 0 0 5px rgba($black, 0.05);
+}

data/app/assets/stylesheets/formadmin/atoms/_button.scss

@@ -0,0 +1,28 @@
+%button {
+  background-color: shade($white, 2.5%);
+  background-image: linear-gradient(to bottom, $white, shade($white, 5%));
+  border: 1px solid $silver;
+  box-shadow: 0 0 5px rgba($black, 0.05);
+  border-radius: $radius;
+  cursor: pointer;
+
+  &:focus,
+  &:hover {
+    background: $white;
+  }
+
+  &:focus {
+    box-shadow: inset 0 0 3px $silver;
+  }
+}
+
+%primary-button {
+  background-color: tint($primary-color, 25%);
+  background-image: linear-gradient(to bottom, tint($primary-color, 25%), $primary-color);
+  border-color: shade($primary-color, 25%);
+  color: $white;
+
+  &:hover {
+    background: shade($primary-color, 20%);
+  }
+}

data/app/assets/stylesheets/formadmin/atoms/_drag.scss

@@ -0,0 +1,12 @@
+.drag {
+  cursor: move;
+
+  img {
+    opacity: 0.5;
+    transition: opacity 250ms;
+  }
+
+  &:hover img {
+    opacity: 1;
+  }
+}

data/app/assets/stylesheets/formadmin/atoms/_header.scss

@@ -0,0 +1,7 @@
+%header {
+  background-color: shade($white, 5%);
+  background-image: linear-gradient(to bottom, shade($white, 5%), shade($white, 10%));
+  box-shadow: inset 0 1px 0 $white;
+  border-bottom: 1px solid $silver;
+  padding: 12px 15px;
+}

data/app/assets/stylesheets/formadmin/atoms/_input.scss

@@ -0,0 +1,19 @@
+%input {
+  appearance: none;
+  background-color: $white;
+  border: 1px solid rgba($silver, 0.75);
+  border-radius: $radius;
+  outline: 0;
+  padding: 10px 12px;
+  transition: border-color 250ms, box-shadow 250ms;
+  width: 100%;
+
+  &:focus {
+    border-color: rgba($primary-color, 0.5);
+    box-shadow: 0 0 5px rgba($primary-color, 0.25);
+
+    ~ .inline-hints {
+      color: $text-color;
+    }
+  }
+}

data/app/assets/stylesheets/formadmin/atoms/_turbolinks.scss

@@ -0,0 +1,7 @@
+.turbolinks-progress-bar {
+  background-color: $primary-color;
+  border-radius: 0 $circular-radius $circular-radius 0;
+  bottom: 0;
+  position: fixed;
+  height: 3px;
+}

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

@@ -0,0 +1,19 @@
+.blank_slate_container {
+  text-align: center;
+
+  .blank_slate {
+    border: 1px dashed $silver;
+    border-radius: 4px;
+    color: rgba($text-color, 0.75);
+    display: inline-block;
+    margin-top: 80px;
+    padding: 50px 100px;
+    text-align: center;
+  }
+
+  span,
+  small {
+    display: block;
+    line-height: 1.5;
+  }
+}

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

@@ -0,0 +1,28 @@
+a.button,
+a:link.button,
+a:visited.button,
+a.clear_filters_btn,
+.cancel a,
+input[type='submit'],
+input[type='button'],
+button {
+  @extend %button;
+  display: inline-block;
+  font-size: 14px;
+  outline: 0;
+  padding: 9px 12px;
+  text-align: center;
+  text-decoration: none;
+  transition: background 250ms, box-shadow 250ms;
+  user-select: none;
+  vertical-align: middle;
+}
+
+input[type='submit'] {
+  @extend %primary-button;
+}
+
+a.member_link {
+  margin-right: 7px;
+  white-space: nowrap;
+}

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

@@ -0,0 +1,82 @@
+.comments .empty {
+  display: block;
+  margin: 20px 0;
+  opacity: 0.5;
+  text-align: center;
+}
+
+div.active_admin_comment {
+  @extend %box;
+  align-items: stretch;
+  background-color: $white;
+  display: flex;
+  overflow: hidden;
+  margin-bottom: 20px;
+}
+
+form.active_admin_comment {
+  li,
+  .inputs {
+    border: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  textarea {
+    border-color: $silver;
+    display: block;
+    float: none;
+    max-width: 700px;
+    margin: 0 auto;
+    width: 100%;
+  }
+}
+
+.active_admin_comment_meta {
+  background-color: shade($white, 5%);
+  border-right: 1px solid $silver;
+  padding: 15px;
+  width: 200px;
+
+  .active_admin_comment_author {
+    margin: 0;
+  }
+
+  span {
+    font-size: 12px;
+  }
+
+  a[data-method='delete'] {
+    border: 1px solid $negative-color;
+    border-radius: $radius;
+    color: $negative-color;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 10px;
+    margin-top: 10px;
+    opacity: 0.5;
+    padding: 2px 3px;
+    text-decoration: none;
+    transition: opacity 250ms;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+
+.active_admin_comment_body {
+  padding: 15px;
+
+  p {
+    margin: 0;
+
+    + p {
+      margin-top: 1em;
+    }
+  }
+}

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

@@ -0,0 +1,100 @@
+.ui-datepicker {
+  background-color: rgba($primary-color, 0.75);
+  backdrop-filter: blur(3px);
+  border-radius: $radius;
+  color: $white;
+  margin-top: 2px;
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+.ui-datepicker-header,
+.ui-datepicker-calendar {
+  padding: 5px;
+  text-align: center;
+}
+
+.ui-datepicker-header {
+  border-bottom: 1px solid rgba($white, 0.25);
+}
+
+.ui-datepicker-title {
+  font-weight: bold;
+}
+
+.ui-datepicker-prev,
+.ui-datepicker-next {
+  cursor: pointer;
+
+  .ui-icon {
+    display: none;
+  }
+
+  &:before {
+    border: 5px solid transparent;
+    content: '';
+    height: 0;
+    position: absolute;
+    top: 10px;
+    transition: border-color 250ms;
+    width: 0;
+  }
+}
+
+.ui-datepicker-prev {
+  &:before {
+    border-left-width: 0;
+    border-right-color: rgba($white, 0.5);
+    left: 10px;
+  }
+
+  &:hover:before {
+    border-right-color: $white;
+  }
+}
+
+.ui-datepicker-next {
+  &:before {
+    border-left-color: rgba($white, 0.5);
+    border-right-width: 0;
+    right: 10px;
+  }
+
+  &:hover:before {
+    border-left-color: $white;
+  }
+}
+
+.ui-datepicker-calendar {
+  font-size: 14px;
+
+  a:hover {
+    transition: background-color 250ms;
+  }
+
+  .ui-state-default {
+    border-radius: $radius;
+    padding: 1px 2px;
+
+    &:hover {
+      background-color: rgba($white, 0.25);
+    }
+  }
+
+  .ui-state-active {
+    background-color: $white;
+    color: $primary-color;
+  }
+
+  .ui-state-highlight {
+    background-color: rgba($white, 0.5);
+    color: $primary-color;
+
+    &:hover {
+      background-color: $white;
+    }
+  }
+}

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

@@ -0,0 +1,88 @@
+.dropdown_menu {
+  display: inline-block;
+}
+
+.dropdown_menu_button {
+  background-color: $white;
+  border: 1px solid $silver;
+  border-radius: $radius;
+  display: block;
+  font-size: 14px;
+  font-weight: bold;
+  padding: 12px 16px;
+  text-decoration: none;
+  transition: all 250ms;
+
+  &:after {
+    border-color: currentColor transparent;
+    border-style: solid;
+    border-width: 3px 3px 0;
+    content: '';
+    display: inline-block;
+    height: 0;
+    margin-left: 10px;
+    position: relative;
+    top: -3px;
+    width: 0;
+  }
+
+  &.disabled {
+    color: $silver;
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &:not(.disabled) {
+    @extend %button;
+
+    + .dropdown_menu_list_wrapper {
+      animation: scale-up 250ms forwards;
+    }
+  }
+}
+
+.dropdown_menu_list_wrapper {
+  font-size: 14px;
+  opacity: 0;
+  position: absolute;
+  transform-origin: center top;
+  z-index: 20;
+}
+
+.dropdown_menu_nipple {
+  background-color: $primary-color;
+  height: 6px;
+  position: absolute;
+  top: -2px;
+  transform: rotate(45deg);
+  width: 6px;
+  z-index: 21;
+}
+
+.dropdown_menu_list {
+  background-color: $white;
+  border: 2px solid $primary-color;
+  border-radius: $radius;
+  box-shadow: 1px 1px 3px rgba($silver, 0.75);
+  list-style: none;
+  overflow: hidden;
+  position: relative;
+  z-index: 22;
+
+  li + li {
+    border-top: 1px solid $silver;
+  }
+
+  a {
+    display: block;
+    padding: 10px 15px;
+    text-align: center;
+    text-decoration: none;
+    transition: background-color 250ms;
+    white-space: nowrap;
+
+    &:hover {
+      background-color: shade($white, 5%);
+    }
+  }
+}

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

@@ -0,0 +1,41 @@
+.flash {
+  background-color: tint($info-color, 95%);
+  background-image: linear-gradient(to bottom, tint($info-color, 90%), tint($info-color, 85%));
+  border: 1px solid rgba($info-color, 0.5);
+  border-width: 0 0 1px;
+  box-shadow: 0 1px 3px rgba($black, 0.1);
+  color: $info-color;
+  font-size: 90%;
+  font-weight: bold;
+  padding: 15px 30px;
+  position: relative;
+  text-shadow: 0 1px 0 rgba($white, 0.8);
+  transition: border-color 250ms;
+
+  &:hover {
+    border-color: $info-color;
+  }
+
+  &.flash_notice {
+    background-color: tint($positive-color, 95%);
+    background-image: linear-gradient(to bottom, tint($positive-color, 90%), tint($positive-color, 85%));
+    border-color: rgba($positive-color, 0.5);
+    color: $positive-color;
+
+    &:hover {
+      border-color: $positive-color;
+    }
+  }
+
+  &.flash_error,
+  .flash_alert {
+    background-color: tint($negative-color, 95%);
+    background-image: linear-gradient(to bottom, tint($negative-color, 90%), tint($negative-color, 85%));
+    border-color: rgba($negative-color, 0.5);
+    color: $negative-color;
+
+    &:hover {
+      border-color: $negative-color;
+    }
+  }
+}