active_admin_pro 0.1.0

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

@@ -0,0 +1,190 @@
+@import "codemirror";
+@import "summernote";
+@import "summernote-bs3";
+
+$summernote-border-color: #f1f1f1;
+$summernote-border-color-active: #e7e7e7;
+$summernote-toolbar-background-color: #f7f7f7;
+
+.input.summernote {
+  margin-bottom: 2em;
+  position: relative;
+
+  .panel.note-editor {
+    background: $white;
+    border: 0;
+    border-radius: 2px;
+    box-shadow: none;
+    margin: 0;
+    padding: 0;
+
+    .btn {
+      background-image: none;
+      border-radius: 3px;
+      box-shadow: none;
+      height: auto;
+      line-height: normal;
+      text-shadow: none;
+    }
+
+    > div {
+      padding: 0;
+    }
+
+    .note-fontsize .dropdown-menu {
+      max-height: 200px;
+      overflow: auto;
+    }
+
+    label {
+      width: auto;
+    }
+
+    .modal.in {
+      background-color: rgba(#000, 0.5);
+      bottom: 0;
+      left: 0;
+      position: fixed;
+      right: 0;
+      top: 0;
+      z-index: 999;
+    }
+
+    .note-dialog {
+      button.close {
+        background-color: transparent;
+        background-image: none;
+        border: 0;
+        box-shadow: none;
+      }
+    }
+
+    .note-editable {
+      background-color: $white;
+      max-height: 95%;
+
+      ol {
+        list-style-type: decimal;
+        padding-left: 2em;
+      }
+
+      ul {
+        list-style-type: disc;
+        padding-left: 2em;
+      }
+    }
+
+    .note-toolbar {
+      background-color: $summernote-toolbar-background-color;
+      border: 1px solid $summernote-border-color;
+      border-bottom: 0;
+      border-radius: 0;
+      padding: 10px 15px;
+
+      a {
+        text-decoration: none;
+      }
+
+      .note-color-btn {
+        background-image: none;
+      }
+    }
+
+    .note-statusbar {
+      border: 1px solid $summernote-border-color;
+      border-top: 0;
+      padding-bottom: 1px;
+    }
+  }
+
+  .note-editing-area {
+    border: 1px solid $summernote-border-color;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+  }
+
+  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 {
+    border-top: 1px solid $error-color;
+    color: $error-color;
+    display: block;
+    margin-top: 0;
+    padding-top: 3px;
+  }
+
+  &.focused {
+    label {
+      color: $label-font-color-focused;
+      font-weight: 500;
+    }
+
+    .panel.note-editor {
+      .note-toolbar,
+      .note-editing-area,
+      .note-statusbar {
+        border-color: $summernote-border-color-active;
+      }
+    }
+
+    .note-editing-area {
+      position: relative;
+    }
+  }
+
+  // Required for proper scrolling
+  .CodeMirror-scroll {
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+
+    pre {
+      word-wrap: normal;
+    }
+  }
+
+  // Hide double scrollbars (OS X problem only??)
+  // TODO: Figure out whether this is ok on other platforms
+  .CodeMirror-hscrollbar,
+  .CodeMirror-vscrollbar {
+    display: none !important;
+  }
+}
+
+#summernote_image_dialog {
+  .input.text {
+    margin-bottom: 1em;
+  }
+
+  input[type="text"] {
+    border: 1px solid color($grey, 300);
+    border-radius: 2px;
+    width: 100%;
+
+    &:focus {
+      border-color: $grey;
+    }
+  }
+}
+
+.modal-backdrop.in {
+  display: none;
+}

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

@@ -0,0 +1,100 @@
+$table-base-background-color: $white;
+$table-border-color: color($grey, 300);
+$table-header-background-color: transparent;
+$table-header-font-color: color($blue-grey, 700);
+$table-header-font-color-active: color($blue-grey, 900);
+$table-header-font-color-hover: $blue-grey;
+
+table {
+  margin-bottom: 1em;
+  width: 100%;
+
+  tr {
+    border-bottom: 1px solid $table-border-color;
+
+    &:last-of-type {
+      border-bottom: 0;
+    }
+  }
+
+  thead tr:last-of-type {
+    border-bottom: 2px solid $table-header-font-color;
+  }
+
+  th {
+    background-color: $table-header-background-color;
+    color: $table-header-font-color;
+    font-weight: bold;
+    padding: 1em 1em 0.5em;
+    text-align: left;
+
+    a {
+      color: $table-header-font-color;
+      text-decoration: none;
+
+      &:hover {
+        color: $table-header-font-color-hover;
+      }
+
+      &:active,
+      &.active {
+        color: $table-header-font-color-active;
+      }
+    }
+
+    &.sortable {
+      white-space: nowrap;
+    }
+
+    &.sortable a:before {
+      content: "\f0dc";
+      display: inline-block;
+      font-family: "FontAwesome";
+      font-size: 0.85em;
+      font-weight: normal;
+      margin-right: 3px;
+      opacity: 0.5;
+      position: relative;
+      top: -1px;
+    }
+
+    &.sortable.sorted-asc a:before {
+      content: "\f0de";
+      opacity: 1;
+      top: 0;
+    }
+
+    &.sortable.sorted-desc a:before {
+      content: "\f0dd";
+      opacity: 1;
+      top: -2px;
+    }
+  }
+
+  td {
+    background-color: $table-base-background-color;
+    padding: 1em;
+    text-align: left;
+  }
+
+  .col-actions {
+    width: 10%;
+  }
+
+  .col-selectable {
+    text-align: center;
+    width: 40px;
+
+    input {
+      cursor: pointer;
+    }
+  }
+
+  .col-actions {
+    padding: 0 0.5em;
+
+    a {
+      padding: 1em 0.5em;
+    }
+  }
+}

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

@@ -0,0 +1,55 @@
+.input.text {
+  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.5;
+    }
+  }
+
+  .inline-errors {
+    color: $error-color;
+    left: 0;
+    margin: 3px 0 0;
+    position: absolute;
+    top: 100%;
+  }
+
+  textarea {
+    border: 1px solid $grey;
+    border-radius: 2px;
+    display: block;
+    height: 160px;
+    outline: none;
+    padding: 0.5em;
+    width: 100%;
+  }
+
+  &.focused {
+    label {
+      color: $label-font-color-focused;
+      font-weight: 500;
+
+      abbr {
+        opacity: 0.8;
+      }
+    }
+
+    textarea {
+      border: 2px solid $accent-color;
+    }
+  }
+}

data/app/assets/stylesheets/active_admin_pro/functions/color.scss

@@ -0,0 +1,130 @@
+// Google's material design colors
+// @see https://www.google.com/design/spec/style/color.html
+$amber: #ffc107;
+$black: #000;
+$blue: #2196f3;
+$blue-grey: #607d8b;
+$brown: #795548;
+$cyan: #00bcd4;
+$deep-orange: #ff5722;
+$deep-purple: #673ab7;
+$green: #4caf50;
+$grey: #9e9e9e;
+$indigo: #3f51b5;
+$light-blue: #03a9f4;
+$light-green: #8bc34a;
+$lime: #cddc39;
+$orange: #ff9800;
+$pink: #e91e63;
+$purple: #9c27b0;
+$red: #f44336;
+$teal: #009688;
+$white: #fff;
+$yellow: #ffeb3b;
+
+$amber-colors: #fff8e1, #ffecb3, #ffe082, #ffd54f, #ffca28, #ffc107, #ffb300, #ffa000, #ff8f00, #ff6f00, #ffe57f, #ffd740, #ffc400, #ffab00;
+$blue-colors: #e3f2fd, #bbdefb, #90caf9, #64b5f6, #42a5f5, #2196f3, #1e88e5, #1976d2, #1565c0, #0d47a1, #82b1ff, #448aff, #2979ff, #2962ff;
+$blue-grey-colors: #eceff1, #cfd8dc, #b0bec5, #90a4ae, #78909c, #607d8b, #546e7a, #455a64, #37474f, #263238;
+$brown-colors: #efebe9, #d7ccc8, #bcaaa4, #a1887f, #8d6e63, #795548, #6d4c41, #5d4037, #4e342e, #3e2723;
+$cyan-colors: #e0f7fa, #b2ebf2, #80deea, #4dd0e1, #26c6da, #00bcd4, #00acc1, #0097a7, #00838f, #006064, #84ffff, #18ffff, #00e5ff, #00b8d4;
+$deep-orange-colors: #fbe9e7, #ffccbc, #ffab91, #ff8a65, #ff7043, #ff5722, #f4511e, #e64a19, #d84315, #bf360c, #ff9e80, #ff6e40, #ff3d00, #dd2c00;
+$deep-purple-colors: #ede7f6, #d1c4e9, #b39ddb, #9575cd, #7e57c2, #673ab7, #5e35b1, #512da8, #4527a0, #311b92, #b388ff, #7c4dff, #651fff, #6200ea;
+$green-colors: #e8f5e9, #c8e6c9, #a5d6a7, #81c784, #66bb6a, #4caf50, #43a047, #388e3c, #2e7d32, #1b5e20, #b9f6ca, #69f0ae, #00e676, #00c853;
+$grey-colors: #fafafa, #f5f5f5, #eeeeee, #e0e0e0, #bdbdbd, #9e9e9e, #757575, #616161, #424242, #212121;
+$indigo-colors: #e8eaf6, #c5cae9, #9fa8da, #7986cb, #5c6bc0, #3f51b5, #3949ab, #303f9f, #283593, #1a237e, #8c9eff, #536dfe, #3d5afe, #304ffe;
+$light-blue-colors: #e1f5fe, #b3e5fc, #81d4fa, #4fc3f7, #29b6f6, #03a9f4, #039be5, #0288d1, #0277bd, #01579b, #80d8ff, #40c4ff, #00b0ff, #0091ea;
+$light-green-colors: #f1f8e9, #dcedc8, #c5e1a5, #aed581, #9ccc65, #8bc34a, #7cb342, #689f38, #558b2f, #33691e, #ccff90, #b2ff59, #76ff03, #64dd17;
+$lime-colors: #f9fbe7, #f0f4c3, #e6ee9c, #dce775, #d4e157, #cddc39, #c0ca33, #afb42b, #9e9d24, #827717, #f4ff81, #eeff41, #c6ff00, #aeea00;
+$orange-colors: #fff3e0, #ffe0b2, #ffcc80, #ffb74d, #ffa726, #ff9800, #fb8c00, #f57c00, #ef6c00, #e65100, #ffd180, #ffab40, #ff9100, #ff6d00;
+$pink-colors: #fce4ec, #f8bbd0, #f48fb1, #f06292, #ec407a, #e91e63, #d81b60, #c2185b, #ad1457, #880e4f, #ff80ab, #ff4081, #f50057, #c51162;
+$purple-colors: #f3e5f5, #e1bee7, #ce93d8, #ba68c8, #ab47bc, #9c27b0, #8e24aa, #7b1fa2, #6a1b9a, #4a148c, #ea80fc, #e040fb, #d500f9, #aa00ff;
+$red-colors: #ffebee, #ffcdd2, #ef9a9a, #e57373, #ef5350, #f44336, #e53935, #d32f2f, #c62828, #b71c1c, #ff8a80, #ff5252, #ff1744, #d50000;
+$teal-colors: #e0f2f1, #b2dfdb, #80cbc4, #4db6ac, #26a69a, #009688, #00897b, #00796b, #00695c, #004d40, #a7ffeb, #64ffda, #1de9b6, #00bfa5;
+$yellow-colors: #fffde7, #fff9c4, #fff59d, #fff176, #ffee58, #ffeb3b, #fdd835, #fbc02d, #f9a825, #f57f17, #ffff8d, #ffff00, #ffea00, #ffd600;
+
+@function color($color, $number: 500) {
+  $colors: $indigo-colors;
+  $index: 6;
+
+  @if $color == $amber {
+    $colors: $amber-colors;
+  } @else if $color == $black {
+    @return color($grey, $number);
+  } @else if $color == $blue {
+    $colors: $blue-colors;
+  } @else if $color == $blue-grey {
+    $colors: $blue-grey-colors;
+  } @else if $color == $brown {
+    $colors: $brown-colors;
+  } @else if $color == $cyan {
+    $colors: $cyan-colors;
+  } @else if $color == $deep-orange {
+    $colors: $deep-orange-colors;
+  } @else if $color == $deep-purple {
+    $colors: $deep-purple-colors;
+  } @else if $color == $green {
+    $colors: $green-colors;
+  } @else if $color == $grey {
+    $colors: $grey-colors;
+  } @else if $color == $indigo {
+    $colors: $indigo-colors;
+  } @else if $color == $light-blue {
+    $colors: $light-blue-colors;
+  } @else if $color == $light-green {
+    $colors: $light-green-colors;
+  } @else if $color == $green {
+    $colors: $green-colors;
+  } @else if $color == $lime {
+    $colors: $lime-colors;
+  } @else if $color == $orange {
+    $colors: $orange-colors;
+  } @else if $color == $pink {
+    $colors: $pink-colors;
+  } @else if $color == $purple {
+    $colors: $purple-colors;
+  } @else if $color == $red {
+    $colors: $red-colors;
+  } @else if $color == $teal {
+    $colors: $teal-colors;
+  } @else if $color == $white {
+    @return $white;
+  } @else if $color == $yellow {
+    $colors: $yellow-colors;
+  }
+
+  @if $number == 50 {
+    $index: 1;
+  } @else if $number == 100 {
+    $index: 2;
+  } @else if $number == 200 {
+    $index: 3;
+  } @else if $number == 300 {
+    $index: 4;
+  } @else if $number == 400 {
+    $index: 5;
+  } @else if $number == 500 {
+    $index: 6;
+  } @else if $number == 600 {
+    $index: 7;
+  } @else if $number == 700 {
+    $index: 8;
+  } @else if $number == 800 {
+    $index: 9;
+  } @else if $number == 900 {
+    $index: 10;
+  } @else {
+    @if $color != $blue-grey and $color != $brown and $color != $grey {
+      @if $number == A100 {
+        $index: 11;
+      } @else if $number == A200 {
+        $index: 12;
+      } @else if $number == A400 {
+        $index: 13;
+      } @else if $number == A700 {
+        $index: 14;
+      }
+    }
+  }
+
+  @return nth($colors, $index);
+}