active_admin_pro 0.1.0

data/app/assets/stylesheets/active_admin_pro/components/dropdown_menu_button.scss

@@ -0,0 +1,40 @@
+.dropdown_menu_button {
+  @include button;
+
+  &:after {
+    content: "\f0d7";
+    display: inline-block;
+    font-family: "FontAwesome";
+    font-size: 0.9em;
+    margin-left: 5px;
+  }
+}
+
+.dropdown_menu_list {
+  background-color: $white;
+  box-shadow: 0 1px 3px rgba($black, 0.4);
+  float: left;
+  list-style-type: none;
+  margin: -2px 0 0;
+  padding: 0;
+  position: absolute;
+  z-index: 10;
+
+  a {
+    color: $base-font-color;
+    display: block;
+    padding: 1em;
+    text-decoration: none;
+
+    &:hover {
+      background-color: $base-background-color;
+      color: $base-font-color;
+    }
+
+    &:active,
+    &.active {
+      background-color: $accent-color;
+      color: text-color($accent-color);
+    }
+  }
+}

data/app/assets/stylesheets/active_admin_pro/components/fieldset.scss

@@ -0,0 +1,26 @@
+$fieldset-legend-color: color($blue-grey, 700);
+
+fieldset.actions {
+  border: 0;
+  display: block;
+  margin: 1em 0 0;
+  padding: 0;
+
+  legend {
+    color: $fieldset-legend-color;
+    display: block;
+    font-size: 1.17em;
+    font-weight: bold;
+    margin: 0 0 -0.5em;
+    padding: 0;
+    position: relative;
+    text-transform: uppercase;
+    top: -1.35em;
+  }
+
+  ol {
+    list-style-type: none;
+    margin-top: 0;
+    padding: 0;
+  }
+}

data/app/assets/stylesheets/active_admin_pro/components/file_input.scss

@@ -0,0 +1,27 @@
+.input.file {
+  margin-bottom: 2em;
+  position: relative;
+
+  label {
+    color: $label-font-color;
+    cursor: pointer;
+    display: block;
+    font-weight: 500;
+    margin-bottom: 0.5em;
+
+    abbr {
+      border-bottom: 0;
+      color: $input-required-color;
+      margin-left: 2px;
+      opacity: 0.8;
+    }
+  }
+
+  input {
+    margin-right: 0.5em;
+  }
+
+  .inline-errors {
+    font-weight: 300;
+  }
+}

data/app/assets/stylesheets/active_admin_pro/components/has_many_fields.scss

@@ -0,0 +1,4 @@
+fieldset.inputs.has_many_fields {
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
+  padding-top: 1em;
+}

data/app/assets/stylesheets/active_admin_pro/components/inline_errors.scss

@@ -0,0 +1,7 @@
+.inline-errors {
+  color: $error-color;
+  left: 0;
+  margin: 3px 0 0;
+  position: absolute;
+  top: 100%;
+}

data/app/assets/stylesheets/active_admin_pro/components/link.scss

@@ -0,0 +1,16 @@
+$link-color: $accent-color;
+$link-color-active: color($accent-color, 700);
+$link-color-hover: color($accent-color, 300);
+
+a {
+  color: $link-color;
+
+  &:hover {
+    color: $link-color-hover;
+  }
+
+  &:active,
+  &.active {
+    color: $link-color-active;
+  }
+}

data/app/assets/stylesheets/active_admin_pro/components/panel.scss

@@ -0,0 +1,62 @@
+$panel-heading-color: color($blue-grey, 700);
+
+body.index #main_content_wrapper form,
+fieldset.inputs,
+.paginated_collection,
+.panel {
+  background-color: $white;
+  box-shadow: 0 1px 2px rgba($black, 0.2);
+  margin-bottom: 2em;
+  padding: 2em 2em 1em;
+
+  form {
+    box-shadow: none;
+    margin-bottom: 1em;
+    padding: 0;
+  }
+
+  .paginated_collection {
+    box-shadow: none;
+    margin-bottom: 0;
+    padding: 0;
+  }
+
+  h3 {
+    color: $panel-heading-color;
+    font-size: 1.17em;
+    margin: -0.5em 0 1em;
+    padding: 0;
+    text-transform: uppercase;
+  }
+}
+
+fieldset.inputs {
+  border: 0;
+  display: block;
+  padding-top: 4em;
+
+  > legend {
+    color: $fieldset-legend-color;
+    display: block;
+    font-size: 1.17em;
+    font-weight: bold;
+    margin: 0 0 -0.5em;
+    padding: 0;
+    position: relative;
+    text-transform: uppercase;
+    top: 2em;
+  }
+
+  ol {
+    list-style-type: none;
+    margin-top: 0;
+    padding: 0;
+  }
+}
+
+@include media($mobile) {
+  form,
+  .panel {
+    padding: 2em 1em 1em;
+  }
+}

data/app/assets/stylesheets/active_admin_pro/components/phone_input.scss

@@ -0,0 +1,31 @@
+@import "intl-tel-input";
+
+.input.phone {
+  position: relative;
+  z-index: 2;
+
+  .intl-tel-input {
+    width: 100%;
+
+    input {
+      padding-left: 44px;
+
+      @include placeholder {
+        color: transparent;
+      }
+    }
+  }
+
+  .flag-dropdown {
+    padding: 0;
+    top: -7px;
+  }
+
+  &.blank .flag-dropdown {
+    opacity: 0;
+  }
+
+  &.focused .flag-dropdown {
+    opacity: 1;
+  }
+}

data/app/assets/stylesheets/active_admin_pro/components/radio_input.scss

@@ -0,0 +1,38 @@
+.input.radio {
+  margin-bottom: 2em;
+  position: relative;
+
+  fieldset {
+    border: 0;
+    margin: 0;
+    padding: 0;
+  }
+
+  legend {
+    margin-bottom: 0.5em;
+
+    label {
+      color: $label-font-color;
+      font-weight: 500;
+    }
+
+    abbr {
+      border-bottom: 0;
+      color: $input-required-color;
+      margin-left: 2px;
+      opacity: 0.8;
+    }
+  }
+
+  .choice {
+    margin-bottom: 0.5em;
+
+    label {
+      cursor: pointer;
+    }
+  }
+
+  input {
+    margin-right: 0.5em;
+  }
+}

data/app/assets/stylesheets/active_admin_pro/components/segmented_control.scss

@@ -0,0 +1,41 @@
+$active-background-color: $accent-color;
+$active-font-color: text-color($accent-color);
+
+.table_tools_segmented_control {
+  @include clearfix;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+
+  li {
+    float: left;
+    margin-right: -1px;
+    position: relative;
+    z-index: 1;
+
+    &.selected {
+      z-index: 2;
+    }
+  }
+
+  a {
+    @include button;
+    border-radius: 0;
+    margin: 0;
+  }
+
+  li.selected a {
+    background-image: linear-gradient(to bottom, lighten($active-background-color, 3%), darken($active-background-color, 5%));
+    color: $active-font-color;
+  }
+
+  li:first-of-type a {
+    border-bottom-left-radius: 2px;
+    border-top-left-radius: 2px;
+  }
+
+  li:last-of-type a {
+    border-bottom-right-radius: 2px;
+    border-top-right-radius: 2px;
+  }
+}

data/app/assets/stylesheets/active_admin_pro/components/select_input.scss

@@ -0,0 +1,42 @@
+.input.country,
+.input.select {
+  margin-bottom: 2em;
+  position: relative;
+
+  label {
+    color: $label-font-color;
+    cursor: pointer;
+    display: block;
+    font-size: 1em;
+    font-weight: 500;
+    margin-bottom: 0.5em;
+    width: 100%;
+
+    abbr {
+      @include transition(opacity 50ms $transition-timing);
+      border-bottom: 0;
+      color: $input-required-color;
+      margin-left: 2px;
+      opacity: 0.8;
+    }
+  }
+
+  .inline-errors {
+    color: $error-color;
+    left: 0;
+    margin: 3px 0 0;
+    position: absolute;
+    top: 100%;
+  }
+
+  &.focused {
+    label {
+      color: $label-font-color-focused;
+      font-weight: 500;
+
+      abbr {
+        opacity: 0.8;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/active_admin_pro/components/sortable_handle.scss

@@ -0,0 +1,21 @@
+$sortable-handle-color: color($grey, 400) !default;
+
+body.index .handle {
+  color: transparent;
+  cursor: move;
+  display: block;
+  height: 100%;
+  text-align: center;
+  width: 100%;
+
+  &:before {
+    border-radius: 2px;
+    color: $sortable-handle-color;
+    content: "\f142 \f142";
+    display: inline-block;
+    font-family: "FontAwesome";
+    font-size: 20px;
+    -webkit-font-smoothing: antialiased;
+    letter-spacing: 1px;
+  }
+}

data/app/assets/stylesheets/active_admin_pro/components/string_input.scss

@@ -0,0 +1,85 @@
+// Google Material Design inspired string input with floating label
+.input.stringish {
+  @include transform(translate3d(0, 0, 0));
+  @include transition(all 100ms $transition-timing);
+  border-bottom: 1px solid transparent;
+  margin-bottom: 2em;
+  padding-top: 2em;
+  position: relative;
+
+  label {
+    @include transform(scale(1.2) translateY(-$base-font-size));
+    @include transform-origin(0 0);
+    @include transition(font-size 180ms $transition-timing, transform 180ms $transition-timing);
+    color: $input-placeholder-color;
+    cursor: pointer;
+    display: block;
+    padding-top: 1em;
+    position: absolute;
+    width: 100%;
+    z-index: 2;
+
+    abbr {
+      @include transition(opacity 50ms $transition-timing);
+      border-bottom: 0;
+      color: $input-required-color;
+      margin-left: 2px;
+      opacity: 0.5;
+    }
+  }
+
+  input {
+    @include transition(all 100ms $transition-timing);
+    background: none;
+    border: 0;
+    border-bottom: 1px solid $input-border-color;
+    border-radius: 0;
+    color: $input-font-color;
+    font-size: 1.2em;
+    outline: none;
+    padding: 0 0 6px;
+    position: relative;
+    width: 100%;
+    z-index: 1;
+  }
+
+  &.error {
+    input {
+      border-bottom: 1px solid $error-color;
+    }
+  }
+
+  &.focused,
+  &.has-value {
+    label {
+      @include transform(scale(1) translateY(-2.8 * $base-font-size));
+      color: $label-font-color;
+      font-weight: 500;
+
+      abbr {
+        opacity: 0.8;
+      }
+    }
+  }
+
+  &.focused {
+    border-bottom: 1px solid $input-border-color-focused;
+
+    label {
+      color: $label-font-color-focused;
+    }
+
+    input {
+      border-bottom: 1px solid $input-border-color-focused;
+      color: $input-font-color-focused;
+    }
+
+    &.error {
+      border-bottom: 1px solid $error-color;
+
+      input {
+        border-bottom: 1px solid $error-color;
+      }
+    }
+  }
+}