administrate 0.1.2 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 2ed47c9f36d7d10aba73c04f003cc35472305e63
-  data.tar.gz: 3e5642c6eaf135a0ff333f7e563c14a90458bf8c
+  metadata.gz: be86082070f80aad91eef0098bfd4eeabdc19e72
+  data.tar.gz: 974b398b126fa3a2a013037ca7fc8edebc2bb698
 SHA512:
-  metadata.gz: ea86641653105a36577715e4937d0a337aa4f4ddf143a2130a0f0e24c14da4eea92cc6ea642aa98c9bcf6b053256c6031d9cf326fc1f12ae5483cb6731f6a292
-  data.tar.gz: bf9a63397b90fbbe6e1a5bcb77f55c6eebadcc6d4fd67d4edfa4146bcce79c3b9e4b79d106cce98e1394d87e965be3ba4237ef2238e95f725d5fa2e8de761946
+  metadata.gz: b3dad40ff964f01b2e7f1bdcbca7344729d80697b9b9626b8d312909292606cc2ec5464c0dc6bc29d3cf2891493b1f7032f26fac0674aa7ea02f02f4e970b1b4
+  data.tar.gz: 5f631a841cc0212d8f0f693b257f69462768c5c53baeb4730d378b51d2fc4fdd2c76291624b191f8482f5f13b8c6b70fb3fa064938ffdf663081ad1148d494c0

data/app/assets/images/administrate/search.svg

@@ -1,6 +1,6 @@
-<svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+<svg id="search" width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
     <title>
         search
     </title>
-    <path d="M27.885 32.515c-2.864 1.966-6.333 3.116-10.07 3.116C7.976 35.63 0 27.656 0 17.817 0 7.976 7.976 0 17.816 0S35.63 7.976 35.63 17.816c0 3.736-1.15 7.205-3.115 10.07l14.53 14.53c1.278 1.277 1.275 3.352 0 4.628-1.28 1.278-3.353 1.278-4.63 0l-14.53-14.53zm-10.07-3.736c6.056 0 10.964-4.91 10.964-10.964 0-6.055-4.91-10.964-10.964-10.964-6.055 0-10.964 4.91-10.964 10.964 0 6.055 4.91 10.963 10.964 10.963z" fill="#D8D8D8" fill-rule="evenodd"/>
+    <path d="M27.885 32.515c-2.864 1.966-6.333 3.116-10.07 3.116C7.976 35.63 0 27.656 0 17.817 0 7.976 7.976 0 17.816 0S35.63 7.976 35.63 17.816c0 3.736-1.15 7.205-3.115 10.07l14.53 14.53c1.278 1.277 1.275 3.352 0 4.628-1.28 1.278-3.353 1.278-4.63 0l-14.53-14.53zm-10.07-3.736c6.056 0 10.964-4.91 10.964-10.964 0-6.055-4.91-10.964-10.964-10.964-6.055 0-10.964 4.91-10.964 10.964 0 6.055 4.91 10.963 10.964 10.963z" fill-rule="evenodd"/>
 </svg>

data/app/assets/images/administrate/sort_arrow.svg

@@ -1,4 +1,4 @@
-<svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+<svg id="sort_arrow" width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
   <title>sort_arrow</title>
   <path d="M2.988 33.02c-1.66 0-1.943-.81-.618-1.824l20-15.28c.878-.672 2.31-.67 3.188 0l20.075 15.288c1.316 1.003 1.048 1.816-.62 1.816H2.987z" />
 </svg>

data/app/assets/javascripts/administrate/components/has_many_form.js

@@ -1,3 +1,3 @@
 $(function() {
-  $(".form-field--has-many select").selectize({});
+  $(".field-unit--has-many select").selectize({});
 });

data/app/assets/stylesheets/administrate/application.scss

@@ -2,16 +2,11 @@
 
 @import "normalize-rails";
 @import "bourbon";
-@import "base/grid-settings";
 @import "neat";
 
 @import "selectize";
 @import "datetime_picker";
 
-@import "mixins/mixins";
-@import "base/base";
-
-@import "layout";
-@import "sidebar";
-
-@import "components/components";
+@import "library/**/*";
+@import "base/**/*";
+@import "components/**/*";

data/app/assets/stylesheets/administrate/base/_forms.scss

@@ -1,58 +1,73 @@
 fieldset {
-  background: lighten($base-border-color, 10);
-  border: $base-border;
-  margin: 0 0 ($base-spacing / 2) 0;
-  padding: $base-spacing;
+  background-color: transparent;
+  border: 0;
+  margin: 0;
+  padding: 0;
 }
 
-input,
-label,
-select {
-  display: block;
-  font-family: $form-font-family;
-  font-size: $form-font-size;
+legend {
+  font-weight: $bold-font-weight;
+  margin-bottom: $small-spacing / 2;
+  padding: 0;
 }
 
 label {
-  font-weight: bold;
-  margin-bottom: $base-spacing / 4;
-
-  &.required:after {
-    content: "*";
-  }
+  display: block;
+  font-weight: $bold-font-weight;
+}
 
-  abbr {
-    display: none;
-  }
+input,
+select {
+  display: block;
+  font-family: $base-font-family;
+  font-size: $base-font-size;
 }
 
+[type="color"],
+[type="date"],
+[type="datetime"],
+[type="datetime-local"],
+[type="email"],
+[type="month"],
+[type="number"],
+[type="password"],
+[type="search"],
+[type="tel"],
+[type="text"],
+[type="time"],
+[type="url"],
+[type="week"],
+input:not([type]),
 textarea,
-#{$all-text-inputs},
-select {
-  background-color: white;
-  border-radius: $form-border-radius;
-  border: 1px solid $form-border-color;
-  box-shadow: $form-box-shadow;
+select[multiple] {
+  background-color: $white;
+  border: $base-border;
+  border-radius: $base-border-radius;
+  box-shadow: none;
   box-sizing: border-box;
-  font-family: $form-font-family;
-  font-size: $form-font-size;
-  margin-bottom: $small-spacing;
-  padding: $form-input-padding;
-  transition: border-color;
+  font-family: $base-font-family;
+  font-size: $base-font-size;
+  padding: $base-spacing / 3;
+  transition: border-color $base-duration $base-timing;
   width: 100%;
 
   &:hover {
-    border-color: $form-border-color-hover;
+    border-color: shade($base-border-color, 20%);
   }
 
   &:focus {
-    border-color: $form-border-color-focus;
-    box-shadow: $form-box-shadow-focus;
+    border-color: $action-color;
+    box-shadow: none;
     outline: none;
   }
 
-  @include placeholder {
-    color: $hint-grey;
+  &:disabled {
+    background-color: shade($base-background-color, 5%);
+    cursor: not-allowed;
+
+    &:hover {
+      border: $base-border;
+    }
   }
 }
 
@@ -60,23 +75,20 @@ textarea {
   resize: vertical;
 }
 
-input[type="search"] {
+[type="search"] {
   appearance: none;
 }
 
-input[type="checkbox"],
-input[type="radio"] {
+[type="checkbox"],
+[type="radio"] {
   display: inline;
-  margin-right: $base-spacing / 4;
+  margin-right: $small-spacing / 2;
 }
 
-input[type="file"] {
-  padding-bottom: $base-spacing / 2;
+[type="file"] {
   width: 100%;
 }
 
 select {
-  appearance: none;
-  background: image-url("administrate/dropdown.svg") no-repeat 97% 50% / 10px;
-  margin-bottom: $base-spacing;
+  width: 100%;
 }

data/app/assets/stylesheets/administrate/base/_layout.scss

@@ -0,0 +1,20 @@
+html {
+  background-color: $base-background-color;
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+figure {
+  margin: 0;
+}
+
+img,
+picture {
+  margin: 0;
+  max-width: 100%;
+}

data/app/assets/stylesheets/administrate/base/_lists.scss

@@ -1,31 +1,19 @@
 ul,
 ol {
+  list-style-type: none;
   margin: 0;
   padding: 0;
-  list-style-type: none;
-
-  &%default-ul {
-    list-style-type: disc;
-    margin-bottom: $base-spacing / 2;
-    padding-left: $base-spacing;
-  }
-
-  &%default-ol {
-    list-style-type: decimal;
-    margin-bottom: $base-spacing / 2;
-    padding-left: $base-spacing;
-  }
 }
 
 dl {
-  margin-bottom: $base-spacing / 2;
-}
+  margin-bottom: $small-spacing;
 
-dt {
-  font-weight: bold;
-  margin-top: $base-spacing / 2;
-}
+  dt {
+    font-weight: $bold-font-weight;
+    margin-top: $small-spacing;
+  }
 
-dd {
-  margin: 0;
+  dd {
+    margin: 0;
+  }
 }

data/app/assets/stylesheets/administrate/base/_tables.scss

@@ -3,20 +3,23 @@ table {
   width: 100%;
 }
 
+th {
+  border-bottom: 1px solid shade($base-border-color, 25%);
+  text-align: left;
+}
+
 th,
 td {
   padding: $small-spacing;
   vertical-align: middle;
 }
 
-th {
-  border-bottom: $dark-border;
-  padding-top: 0;
-  text-align: left;
-}
-
 td {
   border-bottom: $base-border;
+  font-feature-settings: "kern", "liga", "clig", "calt", "lnum", "tnum";
+  font-kerning: normal;
+  font-variant-ligatures: common-ligatures, contextual;
+  font-variant-numeric: lining-nums, tabular-nums;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

data/app/assets/stylesheets/administrate/base/_typography.scss

@@ -1,5 +1,4 @@
 body {
-  -webkit-font-smoothing: antialiased;
   color: $base-font-color;
   font-family: $base-font-family;
   font-size: $base-font-size;
@@ -12,76 +11,32 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: $header-font-family;
-  line-height: $header-line-height;
+  font-family: $heading-font-family;
+  font-size: $base-font-size;
+  line-height: $heading-line-height;
   margin: 0;
-  text-rendering: optimizeLegibility; // Fix the character spacing for headings
-}
-
-h1 {
-  font-size: $h1-font-size;
-}
-
-h2 {
-  font-size: $h2-font-size;
-}
-
-h3 {
-  font-size: $h3-font-size;
-}
-
-h4 {
-  font-size: $h4-font-size;
-}
-
-h5 {
-  font-size: $h5-font-size;
-}
-
-h6 {
-  font-size: $h6-font-size;
 }
 
 p {
-  margin: 0 0 ($base-spacing / 2);
+  margin: 0 0 $small-spacing;
 }
 
 a {
-  color: $base-link-color;
+  color: $action-color;
   text-decoration: none;
-  transition: color 0.1s linear;
+  transition: color $base-duration $base-timing;
 
+  &:active,
+  &:focus,
   &:hover {
-    color: $hover-link-color;
+    color: shade($action-color, 25%);
   }
 }
 
 hr {
   border-bottom: $base-border;
-  border-left: none;
-  border-right: none;
-  border-top: none;
-  margin: $base-spacing 0;
-}
-
-img,
-picture {
-  margin: 0;
-  max-width: 100%;
-}
-
-blockquote {
-  border-left: 2px solid $base-border-color;
-  color: lighten($base-font-color, 15);
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
   margin: $base-spacing 0;
-  padding-left: $base-spacing / 2;
-}
-
-cite {
-  color: lighten($base-font-color, 25);
-  font-style: italic;
-
-  &:before {
-    content: "\2014 \00A0";
-  }
 }

data/app/assets/stylesheets/administrate/components/_app-container.scss

@@ -0,0 +1,7 @@
+.app-container {
+  @include margin(null auto);
+  align-items: stretch;
+  display: flex;
+  max-width: 100em;
+  min-height: 100vh;
+}

data/app/assets/stylesheets/administrate/components/_attributes.scss

@@ -1,9 +1,9 @@
 .attribute-label {
   @include data-label;
   @include span-columns(2 of 12);
+  clear: left;
   margin-top: 0;
   text-align: right;
-  clear: left;
 }
 
 .preserve-whitespace {

data/app/assets/stylesheets/administrate/components/_buttons.scss

@@ -0,0 +1,36 @@
+#{$all-buttons},
+.button {
+  appearance: none;
+  background-color: $action-color;
+  border: 0;
+  border-radius: $base-border-radius;
+  color: $white;
+  cursor: pointer;
+  display: inline-block;
+  font-family: $base-font-family;
+  font-size: $base-font-size;
+  -webkit-font-smoothing: antialiased;
+  font-weight: $bold-font-weight;
+  line-height: 1;
+  padding: $small-spacing $base-spacing;
+  text-decoration: none;
+  transition: background-color $base-duration $base-timing;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+
+  &:hover,
+  &:focus {
+    background-color: shade($action-color, 20%);
+    color: $white;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+
+    &:hover {
+      background-color: $action-color;
+    }
+  }
+}

data/app/assets/stylesheets/administrate/components/_cells.scss

@@ -1,54 +1,48 @@
 .cell-label {
   @include data-label;
 
-  a {
-    @include fill-parent;
-    color: inherit;
-    display: inline-block;
-    transition: $base-transition;
-  }
-
-  &--asc,
-  &--desc {
-    font-weight: bold;
-  }
-
-  &__sort-indicator {
-    display: inline-block;
-    height: 1em;
-    overflow: hidden;
-    position: absolute;
-    right: 0;
-
-    &--desc {
-      transform: rotate(180deg);
+  &:hover {
+    a {
+      color: $action-color;
     }
 
     svg {
-      height: 100%;
-      transition: $base-transition;
-    }
-
-    path {
-      fill: $hint-grey;
+      fill: $action-color;
+      transform: rotate(180deg);
     }
   }
 
-  &:hover {
-    a {
-      color: $base-accent-color;
-    }
+  a {
+    @include fill-parent;
+    color: inherit;
+    display: inline-block;
+    transition: color $base-duration $base-timing;
+  }
+}
 
-    path {
-      fill: $base-accent-color;
-    }
+.cell-label--asc,
+.cell-label--desc {
+  font-weight: $bold-font-weight;
+}
 
-    svg {
-      transform: rotate(180deg);
-    }
+.cell-label__sort-indicator {
+  display: inline-block;
+  height: 1em;
+  overflow: hidden;
+  position: absolute;
+  right: 0;
+
+  svg {
+    height: 100%;
+    transition: transform $base-duration $base-timing;
+    fill: $hint-grey;
   }
 }
 
+.cell-label__sort-indicator--desc {
+  transform: rotate(180deg);
+}
+
 .cell-data--number,
 .cell-label--number {
   text-align: right;