administrate 0.20.1 → 1.0.0

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

@@ -2,7 +2,9 @@
 
 @import "reset/normalize";
 
-@import "selectize";
+@import "trix/dist/trix";
+@import "selectize/dist/css/selectize";
+@import "selectize/dist/css/selectize.default";
 
 @import "library/clearfix";
 @import "library/data-label";
@@ -25,5 +27,3 @@
 @import "components/navigation";
 @import "components/pagination";
 @import "components/search";
-
-@import "utilities/text-color";

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

@@ -32,6 +32,10 @@ textarea {
   font-size: 16px;
 }
 
+textarea {
+  resize: vertical;
+}
+
 [type="color"],
 [type="date"],
 [type="datetime-local"],
@@ -78,10 +82,6 @@ textarea {
   }
 }
 
-textarea {
-  resize: vertical;
-}
-
 [type="checkbox"],
 [type="radio"] {
   display: inline;

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

@@ -13,6 +13,11 @@ figure {
   margin: 0;
 }
 
+/* stylelint-disable selector-no-qualifying-type, selector-class-pattern */
+form.button_to { // we don't control this class name
+  display: contents;
+}
+
 img,
 picture {
   margin: 0;

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

@@ -23,7 +23,7 @@ tbody tr {
     background-color: $base-background-color;
   }
 
-  [role=link] {
+  [role="link"] {
     cursor: pointer;
   }
 

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

@@ -21,7 +21,13 @@ p {
   margin: 0 0 $small-spacing;
 }
 
-a {
+a,
+.link:is(
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"]
+) {
   color: $action-color;
   text-decoration-skip-ink: auto;
   transition: color $base-duration $base-timing;
@@ -34,6 +40,14 @@ a {
     outline: $focus-outline;
     outline-offset: $focus-outline-offset;
   }
+  /* stylelint-disable selector-no-qualifying-type */
+  &.link--danger {
+    color: $red;
+  }
+
+  &.link--danger:hover {
+    color: mix($black, $red, 20%);
+  }
 }
 
 hr {

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

@@ -1,5 +1,6 @@
 .attribute-label {
   @include data-label;
+
   clear: left;
   float: left;
   margin-bottom: $base-spacing;

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

@@ -1,7 +1,7 @@
 button,
-input[type="button"],
-input[type="reset"],
-input[type="submit"],
+[type="button"],
+[type="reset"],
+[type="submit"],
 .button {
   appearance: none;
   background-color: $action-color;
@@ -22,23 +22,31 @@ input[type="submit"],
   vertical-align: middle;
   white-space: nowrap;
 
-  &:hover {
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &:not(.link):hover {
     background-color: mix($black, $action-color, 20%);
     color: $white;
   }
 
-  &:focus {
+  &:not(.link):focus {
     outline: $focus-outline;
     outline-offset: $focus-outline-offset;
   }
 
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
+  &:not(.link):disabled:hover {
+    background-color: $action-color;
+  }
+}
 
-    &:hover {
-      background-color: $action-color;
-    }
+
+form.button_to { /* stylelint-disable selector-no-qualifying-type, selector-class-pattern */
+  .link {
+    padding-left: 0;
+    padding-right: 0;
   }
 }
 
@@ -52,12 +60,29 @@ input[type="submit"],
 .button--danger {
   background-color: $red;
 
-  &:hover {
+  &:not(.link):hover {
     background-color: mix($black, $red, 20%);
     color: $white;
   }
+
+  &:not(.link):disabled:hover {
+    background-color: mix($black, $red, 20%);
+  }
 }
 
 .button--nav {
   margin-bottom: $base-spacing;
 }
+
+.button--tooltip {
+  background: none;
+	border: none;
+	color: inherit;
+	cursor: pointer;
+  padding: 0;
+
+  /* stylelint-disable declaration-no-important */
+  &:hover {
+    background-color: unset !important;
+  }
+}

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

@@ -1,6 +1,25 @@
+.cell-label__sort-indicator {
+  float: right;
+  margin-left: 5px;
+
+  svg {
+    color: $hint-grey;
+    height: 13px;
+    transition: transform $base-duration $base-timing;
+    width: 13px;
+  }
+}
+
 .cell-label {
   padding-top: 0.15em;
 
+  a {
+    color: inherit;
+    display: inline-block;
+    transition: color $base-duration $base-timing;
+    width: 100%;
+  }
+
   &:hover {
     a {
       color: $action-color;
@@ -11,13 +30,6 @@
       transform: rotate(180deg);
     }
   }
-
-  a {
-    color: inherit;
-    display: inline-block;
-    transition: color $base-duration $base-timing;
-    width: 100%;
-  }
 }
 
 .cell-label--asc,
@@ -25,23 +37,18 @@
   font-weight: $bold-font-weight;
 }
 
-.cell-label__sort-indicator {
-  float: right;
-  margin-left: 5px;
-
-  svg {
-    fill: $hint-grey;
-    height: 13px;
-    transition: transform $base-duration $base-timing;
-    width: 13px;
-  }
-}
-
 .cell-label__sort-indicator--desc {
   transform: rotate(180deg);
 }
 
+.cell-label--action-button {
+  white-space: nowrap;
+  width: 1rem;
+}
+
 .cell-data--number,
 .cell-label--number {
   text-align: right;
+  white-space: nowrap;
+  width: 1rem;
 }

data/app/assets/stylesheets/administrate/components/_field-unit.scss

@@ -1,5 +1,6 @@
 .field-unit {
   @include administrate-clearfix;
+
   align-items: center;
   display: flex;
   flex-wrap: wrap;
@@ -16,10 +17,9 @@
 }
 
 .field-unit__field {
+  flex-grow: 1;
   float: left;
   margin-left: 2rem;
-  max-width: 50rem;
-  width: 100%;
 
   .optgroup-header {
     font-weight: $bold-font-weight;
@@ -40,7 +40,7 @@
   width: 100%;
 
   .field-unit__field {
-    width: 100%;
+    flex-grow: 1;
   }
 
   .field-unit__label {

data/app/assets/stylesheets/administrate/components/_main-content.scss

@@ -4,8 +4,8 @@
   box-shadow: 0 0 6px 0 rgba($black, 0.12),
               0 2px 2px rgba($black, 0.2);
   flex: 1 1 100%;
-  padding-bottom: 10vh;
   min-width: 800px;
+  padding-bottom: 10vh;
 }
 
 .main-content__header,

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

@@ -1,4 +1,4 @@
-$_navigation-link-padding: 0.6em;
+$navigation-link-padding: 0.6em;
 
 .navigation {
   flex: 1 0 10rem;
@@ -11,8 +11,8 @@ $_navigation-link-padding: 0.6em;
   color: $base-font-color;
   display: block;
   line-height: 1;
-  margin-left: -($_navigation-link-padding);
-  padding: $_navigation-link-padding;
+  margin-left: -($navigation-link-padding);
+  padding: $navigation-link-padding;
   transition: background-color $base-duration $base-timing,
               color $base-duration $base-timing;
 

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

@@ -1,4 +1,4 @@
-$_search-icon-size: 1rem;
+$search-icon-size: 1rem;
 
 .search {
   margin-left: auto;
@@ -10,37 +10,78 @@ $_search-icon-size: 1rem;
 
 .search__input {
   border-radius: 100rem;
-  padding-left: $_search-icon-size * 2.5;
-  padding-right: $_search-icon-size * 2.5;
+  padding-left: $search-icon-size * 2.5;
+  padding-right: $search-icon-size * 2.5;
 }
 
 .search__eyeglass-icon {
-  fill: $grey-7;
-  height: $_search-icon-size;
-  left: $_search-icon-size;
+  height: $search-icon-size;
+  left: $search-icon-size;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  width: $_search-icon-size;
+  width: $search-icon-size;
 }
 
 .search__clear-link {
-  height: $_search-icon-size;
+  height: $search-icon-size;
   position: absolute;
-  right: $_search-icon-size * 0.75;
+  right: $search-icon-size * 0.75;
   top: 50%;
   transform: translateY(-50%);
-  width: $_search-icon-size;
+  width: $search-icon-size;
 }
 
 .search__clear-icon {
-  fill: $grey-5;
-  height: $_search-icon-size;
+  color: $grey-5;
+  height: $search-icon-size;
   position: absolute;
   transition: fill $base-duration $base-timing;
-  width: $_search-icon-size;
+  width: $search-icon-size;
 
   &:hover {
-    fill: $action-color;
+    color: $action-color;
   }
 }
+
+.search__tooltip {
+  anchor-name: --tooltip-anchor;
+  margin-right: 2rem;
+
+  svg {
+    color: $grey-5;
+    height: 24px;
+    width: 24px;
+
+    &:hover {
+      color: $action-color;
+    }
+  }
+}
+
+.search__tooltip-popover {
+  background-color: $blue;
+  border-color: $blue;
+  border-radius: $base-border-radius;
+  color: $white;
+  padding: 2rem;
+  width: max-content;
+}
+
+
+/* We can remove this stylelint disable (and the css-anchor-positioning polyfill)
+   when position-anchor becomes widely available */
+
+/* stylelint-disable property-no-unknown */
+.search__tooltip-popover-positioning {
+  left: anchor(center);
+  margin: 1rem;
+  position: fixed;
+  position-anchor: --tooltip-anchor;
+  top: anchor(bottom);
+  transform: translateX(-50%);
+}
+
+.search__tooltip-popover-value {
+  opacity: 0.5;
+}

data/app/assets/stylesheets/administrate/library/_variables.scss

@@ -1,5 +1,7 @@
+/* stylelint-disable scss/dollar-variable-empty-line-before */
+
 // Typography
-$base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+$base-font-family: -apple-system, blinkmacsystemfont, "Segoe UI", "Roboto",
   "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
   sans-serif !default;
 $heading-font-family: $base-font-family !default;
@@ -17,8 +19,8 @@ $base-spacing: $base-line-height * 1em !default;
 $small-spacing: $base-spacing * 0.5 !default;
 
 // Colors
-$white: #fff !default;
-$black: #000 !default;
+$white: #ffffff !default;
+$black: #000000 !default;
 
 $blue: #1976d2 !default;
 $red: #d32f2f !default;
@@ -63,3 +65,5 @@ $base-border: 1px solid $base-border-color !default;
 // Transitions
 $base-duration: 250ms !default;
 $base-timing: ease-in-out !default;
+
+/* stylelint-enable scss/dollar-variable-empty-line-before */

data/app/assets/stylesheets/administrate/reset/_normalize.scss

@@ -100,7 +100,13 @@ pre {
  * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
  */
 
-a {
+a,
+.link:is(
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"]
+) {
   background-color: transparent; /* 1 */
   -webkit-text-decoration-skip: objects; /* 2 */
 }

data/app/assets/stylesheets/{docs.scss → administrate-internal/docs.scss}

@@ -1,14 +1,16 @@
-$blue: #53adc6;
-$red: #cf726e;
-$green: #5bc89e;
-$white: #f0f0f0;
-
-$code-black: #202020;
-$code-white: #e0e0dc;
-$code-green: #b0bf82;
-$code-blue: #8fbdcc;
-$code-yellow: #f8d29d;
-$code-red: #b95c56;
+:root {
+  --blue: #53adc6;
+  --red: #cf726e;
+  --green: #5bc89e;
+  --white: #f0f0f0;
+
+  --code-black: #202020;
+  --code-white: #e0e0dc;
+  --code-green: #b0bf82;
+  --code-blue: #8fbdcc;
+  --code-yellow: #f8d29d;
+  --code-red: #b95c56;
+}
 
 html,
 body {
@@ -30,7 +32,7 @@ h3 {
 }
 
 a {
-  color: $blue;
+  color: var(--blue);
   text-decoration: none;
 }
 
@@ -58,8 +60,8 @@ a {
 }
 
 .flash-wrapper {
-  background-color: $red;
-  color: $white;
+  background-color: var(--red);
+  color: var(--white);
   padding: 1em;
 
   .flash {
@@ -75,19 +77,19 @@ code {
   padding: 0.4em 0.2em 0;
 
   &.hljs {
-    background-color: $code-black;
-    color: $code-white;
+    background-color: var(--code-black);
+    color: var(--code-white);
     padding-left: 1rem;
 
-    .hljs-string { color: $code-green; }
-    .hljs-subst { color: $code-white; }
-    .hljs-constant { color: $code-blue; }
-    .hljs-symbol { color: $code-red; }
-    .hljs-keyword { color: $code-yellow; }
+    .hljs-string { color: var(--code-green); }
+    .hljs-subst { color: var(--code-white); }
+    .hljs-constant { color: var(--code-blue); }
+    .hljs-symbol { color: var(--code-red); }
+    .hljs-keyword { color: var(--code-yellow); }
 
     .hljs-title,
-    .hljs-parent { color: $code-blue; }
+    .hljs-parent { color: var(--code-blue); }
 
-    .hljs-tag { color: $code-yellow; }
+    .hljs-tag { color: var(--code-yellow); }
   }
 }