headmin 0.3.2 → 0.4.0

data/app/assets/stylesheets/headmin/forms/autocomplete.scss

@@ -0,0 +1,21 @@
+.h-autocomplete {
+  position: absolute;
+  top: calc(100% + 2px);
+  left: 0;
+  z-index: $zindex-dropdown;
+  width: 100%;
+  @include reset-text();
+  @include font-size($dropdown-font-size);
+  word-wrap: break-word;
+  background-color: $dropdown-bg;
+  background-clip: padding-box;
+  border-radius: $dropdown-border-radius !important;
+  @include box-shadow($dropdown-box-shadow);
+  border: $dropdown-border-width solid $dropdown-border-color;
+  overflow: hidden;
+
+  .list-group-flush {
+    margin: 0;
+    padding: 0;
+  }
+}

data/app/assets/stylesheets/headmin/forms/file.scss

@@ -0,0 +1,46 @@
+.h-form-file {
+  .h-form-file-thumbnails {
+    margin-bottom: map-get($spacers, 2);
+  }
+
+  &.h-dropzone {
+    padding: map-get($spacers, 2);
+
+    .h-form-file-thumbnails {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.h-form-file-thumbnails {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  gap: map-get($spacers, 2);
+}
+
+.h-form-file-thumbnail {
+  position: relative;
+  pointer-events: initial !important;
+  display: flex;
+}
+
+.h-form-file-thumbnail-remove {
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: $danger;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  border-radius: $border-radius;
+  z-index: 3;
+  cursor: pointer;
+
+  &:hover {
+    background: tint-color($danger, $btn-hover-bg-tint-amount)
+  }
+}

data/app/assets/stylesheets/headmin/forms/repeater.scss

@@ -0,0 +1,62 @@
+.repeater {
+  position: relative;
+}
+
+.repeater-row {
+  position: relative;
+
+  &:hover {
+    .repeater-row-remove {
+      visibility: visible;
+    }
+
+    .repeater-row-add {
+      visibility: visible;
+    }
+
+    .repeater-row-handle {
+      visibility: visible;
+    }
+  }
+}
+
+.repeater-row-remove {
+  position: absolute;
+  top: calc(50% - 17px);
+  right: -22px;
+  z-index: 2;
+  visibility: hidden;
+
+  i.bi {
+    background: white;
+    border-radius: 50%;
+  }
+}
+
+.repeater-row-add {
+  position: absolute;
+  top: calc(100% - 18px);
+  right: calc(50% - 17px);
+  z-index: 2;
+  visibility: hidden;
+
+  i.bi {
+    background: white;
+    border-radius: 50%;
+  }
+}
+
+.repeater-row-handle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  visibility: hidden;
+  cursor: move;
+}
+

data/app/assets/stylesheets/headmin/forms/search.scss

@@ -0,0 +1,12 @@
+input[type="search"] {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E%0A");
+  background-repeat: no-repeat;
+  background-position: 10px center;
+  padding-left: 35px !important;
+}
+
+.form-floating {
+  input[type="search"] ~ label {
+    padding-left: 35px;
+  }
+}

data/app/assets/stylesheets/headmin/forms.scss

@@ -0,0 +1,11 @@
+.form-label[required="required"], .form-check-label[required="required"] {
+  &:after {
+    content: ' *';
+    color: $danger;
+  }
+}
+
+@import "forms/autocomplete";
+@import "forms/file";
+@import "forms/repeater";
+@import "forms/search";

data/app/assets/stylesheets/headmin/general.scss

@@ -1,3 +1,8 @@
 html {
   height: 100%;
+}
+
+mark {
+  padding: 0;
+  box-shadow: 0 $mark-padding 0 $mark-bg, 0 (-$mark-padding) 0 $mark-bg;
 }

data/app/assets/stylesheets/headmin/overrides/bootstrap.scss

@@ -18,7 +18,6 @@ $enable-shadows: true;
 // Typography
 $font-size-base: 0.9rem;
 $font-size-xs: $font-size-base * .75;
-$font-weight-medium: 500;
 $input-font-size: $font-size-base;
 $form-select-font-size: $font-size-base;
 $btn-font-size: $font-size-base;
@@ -29,7 +28,7 @@ $table-border-color: $gray-200;
 $table-group-separator-color: $gray-200;
 $table-hover-bg: $gray-100;
 $table-color: $gray-500;
-$table-th-font-weight: $font-weight-medium;
+$table-th-font-weight: $headings-font-weight;
 $table-cell-padding-x: 1rem;
 $table-cell-padding-y: 0.8rem;
 
@@ -53,13 +52,16 @@ $btn-link-color: $gray-500;
 // Form
 $input-group-addon-bg: $gray-100;
 
+// Mark
+$mark-bg: #ffec89;
+
 // Utilities
 $custom-utilities: (
         "font-weight": (
                 property: font-weight,
                 class: fw,
                 values: (
-                        medium: $font-weight-medium,
+                        medium: $headings-font-weight,
                         light: $font-weight-light,
                         lighter: $font-weight-lighter,
                         normal: $font-weight-normal,

data/app/assets/stylesheets/headmin/overrides/redactorx.scss

@@ -0,0 +1,74 @@
+.rx-container {
+  padding: 0 !important;
+  border: $input-border-width solid $input-border-color;
+  @include border-radius($input-border-radius, 0);
+
+  &.rx-in-focus {
+    color: $input-focus-color;
+    background-color: $input-focus-bg;
+    border-color: $input-focus-border-color;
+    outline: 0;
+    @if $enable-shadows {
+      @include box-shadow($input-box-shadow, $input-focus-box-shadow);
+    } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: $input-focus-box-shadow;
+    }
+
+    &.is-valid {
+      border-color: $success;
+      box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($success, $input-btn-focus-color-opacity);
+    }
+
+    &.is-invalid {
+      border-color: $danger;
+      box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($danger, $input-btn-focus-color-opacity);
+    }
+  }
+
+  &.is-valid, &.is-invalid {
+    background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
+  }
+}
+
+.rx-toolbar-container.is-rx-toolbar {
+  background: transparent;
+  border-bottom: 1px solid $input-border-color;
+}
+
+.rx-content {
+  padding: $input-padding-y $input-padding-x !important;
+  position: relative;
+
+  p {
+    @include font-size($input-font-size);
+    line-height: $input-line-height;
+    color: $input-color;
+  }
+}
+
+.rx-placeholder {
+  &:before {
+    @include font-size($input-font-size);
+    color: $input-placeholder-color;
+    opacity: 1;
+  }
+}
+
+.rx-control {
+  margin-left: -$input-padding-x;
+}
+
+.rx-toolbar {
+  .rx-button-icon {
+    background: $input-bg;
+
+    span {
+      color: $nav-link-disabled-color;
+    }
+
+    &:hover span {
+      color: $input-color;
+    }
+  }
+}

data/app/assets/stylesheets/headmin/popup.scss

@@ -10,6 +10,7 @@
   background-clip: padding-box;
   @include border-radius($popover-border-radius);
   @include box-shadow($popover-box-shadow);
+  border: $popover-border-width solid $popover-border-color;
 
   &.closed {
     display: none;

data/app/assets/stylesheets/headmin/syntax.scss

@@ -1,349 +1,36 @@
-// stylelint-disable comment-empty-line-before, declaration-block-single-line-max-declarations
-
-/* Background .h-syntax { background-color: #f0f0f0; } */
-/* Other .h-syntax .x { } */
-/* Error .h-syntax .err { } */
-/* LineTableTD .h-syntax .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } */
-/* LineTable .h-syntax .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; } */
-/* LineHighlight .h-syntax .hl { display: block; width: 100%; background-color: #ffffcc; } */
-/* LineNumbersTable .h-syntax .lnt { margin-right: .4em; padding: 0 .4em; } */
-/* LineNumbers .h-syntax .ln { margin-right: .4em; padding: 0 .4em; } */
-
-/* Comment */
-.h-syntax .c {
-  color: #727272;
-}
-
-/* CommentHashbang */
-.h-syntax .ch {
-  font-style: italic;
-  color: #60a0b0;
-}
-
-/* CommentMultiline */
-.h-syntax .cm {
-  color: #727272;
-}
-
-/* CommentPreproc */
-.h-syntax .cp {
-  color: #008085;
-}
-
-/* CommentPreprocFile */
-.h-syntax .cpf {
-  color: #007020;
-}
-
-/* CommentSingle */
-.h-syntax .c1 {
-  color: #727272;
-}
-
-/* CommentSpecial */
-.h-syntax .cs {
-  color: #727272;
-}
-
-/* Generic .h-syntax .g { } */
-/* GenericDeleted */
-.h-syntax .gd {
-  background-color: #fcc;
-  border: 1px solid #c00;
-}
-
-/* GenericEmph */
-.h-syntax .ge {
-  font-style: italic;
-}
-
-/* GenericError */
-.h-syntax .gr {
-  color: #f00;
-}
-
-/* GenericHeading */
-.h-syntax .gh {
-  color: #030;
-}
-
-/* GenericInserted */
-.h-syntax .gi {
-  background-color: #cfc;
-  border: 1px solid #0c0;
-}
-
-/* GenericOutput */
-.h-syntax .go {
-  color: #aaa;
-}
-
-/* GenericPrompt */
-.h-syntax .gp {
-  color: #009;
-}
-
-/* GenericStrong */
-.h-syntax .gs {
-  font-weight: 700;
-}
-
-/* GenericSubheading */
-.h-syntax .gu {
-  color: #030;
-}
-
-/* GenericTraceback */
-.h-syntax .gt {
-  color: #9c6;
-}
-
-/* GenericUnderline */
-.h-syntax .gl {
-  text-decoration: underline;
-}
-
-/* Keyword */
-.h-syntax .k {
-  color: #069;
-}
-
-/* KeywordConstant */
-.h-syntax .kc {
-  color: #069;
-}
-
-/* KeywordDeclaration */
-.h-syntax .kd {
-  color: #069;
-}
-
-/* KeywordNamespace */
-.h-syntax .kn {
-  color: #069;
-}
-
-/* KeywordPseudo */
-.h-syntax .kp {
-  color: #069;
-}
-
-/* KeywordReserved */
-.h-syntax .kr {
-  color: #069;
-}
-
-/* KeywordType */
-.h-syntax .kt {
-  color: #078;
-}
-
-/* Literal .h-syntax .l { } */
-/* LiteralDate .h-syntax .ld { color: #c24f19 } */
-/* LiteralNumber */
-.h-syntax .m {
-  color: #c24f19;
-}
-
-/* LiteralNumberBin */
-.h-syntax .mb {
-  color: #40a070;
-}
-
-/* LiteralNumberFloat */
-.h-syntax .mf {
-  color: #c24f19;
-}
-
-/* LiteralNumberHex */
-.h-syntax .mh {
-  color: #c24f19;
-}
-
-/* LiteralNumberInteger */
-.h-syntax .mi {
-  color: #c24f19;
-}
-
-/* LiteralNumberIntegerLong */
-.h-syntax .il {
-  color: #c24f19;
-}
-
-/* LiteralNumberOct */
-.h-syntax .mo {
-  color: #c24f19;
-}
-
-/* LiteralString */
-.h-syntax .s {
-  color: #d73038;
-}
-
-/* LiteralStringAffix */
-.h-syntax .sa {
-  color: #4070a0;
-}
-
-/* LiteralStringBacktick */
-.h-syntax .sb {
-  color: #c30;
-}
-
-/* LiteralStringChar */
-.h-syntax .sc {
-  color: #c30;
-}
-
-/* LiteralStringDelimiter */
-.h-syntax .dl {
-  color: #4070a0;
-}
-
-/* LiteralStringDoc */
-.h-syntax .sd {
-  font-style: italic;
-  color: #c30;
-}
-
-/* LiteralStringDouble */
-.h-syntax .s2 {
-  color: #c30;
-}
-
-/* LiteralStringEscape */
-.h-syntax .se {
-  color: #c30;
-}
-
-/* LiteralStringHeredoc */
-.h-syntax .sh {
-  color: #c30;
-}
-
-/* LiteralStringInterpol */
-.h-syntax .si {
-  color: #a00;
-}
-
-/* LiteralStringOther */
-.h-syntax .sx {
-  color: #c30;
-}
-
-/* LiteralStringRegex */
-.h-syntax .sr {
-  color: #337e7e;
-}
-
-/* LiteralStringSingle */
-.h-syntax .s1 {
-  color: #c30;
-}
-
-/* LiteralStringSymbol */
-.h-syntax .ss {
-  color: #fc3;
-}
-
-/* Name .h-syntax .n { } */
-/* NameAttribute */
-.h-syntax .na {
-  color: #006ee0;
-}
-
-/* NameBuiltin */
-.h-syntax .nb {
-  color: #366;
-}
-
-/* NameBuiltinPseudo .h-syntax .bp { } */
-/* NameClass */
-.h-syntax .nc {
-  color: #168174;
-}
-
-/* NameConstant */
-.h-syntax .no {
-  color: #360;
-}
-
-/* NameDecorator */
-.h-syntax .nd {
-  color: #6b62de;
-}
-
-/* NameEntity */
-.h-syntax .ni {
-  color: #727272;
-}
-
-/* NameException */
-.h-syntax .ne {
-  color: #c00;
-}
-
-/* NameFunction */
-.h-syntax .nf {
-  color: #b715f4;
-}
-
-/* NameFunctionMagic .h-syntax .fm { } */
-/* NameLabel */
-.h-syntax .nl {
-  color: #6b62de;
-}
-
-/* NameNamespace */
-.h-syntax .nn {
-  color: #007ca5;
-}
-
-/* NameOther .h-syntax .nx { } */
-/* NameProperty .h-syntax .py { } */
-/* NameTag */
-.h-syntax .nt {
-  color: #2f6f9f;
-}
-
-/* NameVariable */
-.h-syntax .nv {
-  color: #033;
-}
-
-/* NameVariableClass .h-syntax .vc { } */
-/* NameVariableGlobal .h-syntax .vg { } */
-/* NameVariableInstance .h-syntax .vi { } */
-/* NameVariableMagic .h-syntax .vm { } */
-/* Operator */
-.h-syntax .o {
-  color: #555;
-}
-
-/* OperatorWord */
-.h-syntax .ow {
-  color: #000;
-}
-
-/* Punctuation .h-syntax .p { } */
-/* TextWhitespace */
-.h-syntax .w {
-  color: #bbb;
-}
-
-.h-syntax {
-  .language-bash,
-  .language-sh {
-    &::before {
-      color: #009;
-      content: "$ ";
-      user-select: none;
-    }
-  }
-
-  .language-powershell::before {
-    color: #009;
-    content: "PM> ";
-    user-select: none;
-  }
-}
+.h-syntax { background-color: #ffffcc }
+.h-syntax .hll { background-color: #ffffcc }
+.h-syntax  { background: #f8f8f8; }
+.h-syntax .c { color: #6a737d } /* Comment */
+.h-syntax .err {  } /* Error */
+.h-syntax .k { color: #d73a49 } /* Keyword */
+.h-syntax .o { } /* Operator */
+.h-syntax .ch { color: #6a737d } /* Comment.Hashbang */
+.h-syntax .cm { color: #6a737d } /* Comment.Multiline */
+.h-syntax .cp { color: #d73a49 } /* Comment.Preproc */
+.h-syntax .cpf { color: #032f62 } /* Comment.PreprocFile */
+.h-syntax .c1 { color: #6a737d } /* Comment.Single */
+.h-syntax .cs { color: #6a737d } /* Comment.Special */
+.h-syntax .gd { color: #b31d28; background-color: #ffeef0 } /* Generic.Deleted */
+.h-syntax .ge {  } /* Generic.Emph */
+.h-syntax .gr {  } /* Generic.Error */
+.h-syntax .gh { color: #005cc5 } /* Generic.Heading */
+.h-syntax .gi { color: #22863a; background-color: #f0fff4 } /* Generic.Inserted */
+.h-syntax .go {  } /* Generic.Output */
+.h-syntax .gp {  } /* Generic.Prompt */
+.h-syntax .gs { font-weight: bold } /* Generic.Strong */
+.h-syntax .gu { color: #6f42c1; font-weight: bold } /* Generic.Subheading */
+.h-syntax .gt { color: #0044DD } /* Generic.Traceback */
+.h-syntax .kc { color: #005cc5 } /* Keyword.Constant */
+.h-syntax .kd { color: #d73a49 } /* Keyword.Declaration */
+.h-syntax .kn { color: #d73a49 } /* Keyword.Namespace */
+.h-syntax .kp { color: #d73a49 } /* Keyword.Pseudo */
+.h-syntax .kr { color: #d73a49 } /* Keyword.Reserved */
+.h-syntax .kt { color: #d73a49 } /* Keyword.Type */
+.h-syntax .m { color: #666666 } /* Literal.Number */
+.h-syntax .s { color: #032f62 } /* Literal.String */
+.h-syntax .na { } /* Name.Attribute */
+.h-syntax .nb { color: #005cc5 } /* Name.Builtin */
+.h-syntax .nc { color: #6f42c1 } /* Name.Class */
+.h-syntax .no { color: #005cc5 } /* Name.Constant */
+.h-syntax .nd { color: #6f42c1 } /* Name.Decorator */

data/app/assets/stylesheets/headmin/table.scss

@@ -10,7 +10,7 @@
   a {
     color: $body-color;
     text-decoration: none;
-    font-weight: $font-weight-medium;
+    font-weight: $headings-font-weight;
 
     &:hover {
       text-decoration: underline;

data/app/assets/stylesheets/headmin/utilities/buttons.scss

@@ -0,0 +1,19 @@
+.btn-link {
+  text-decoration: none;
+}
+
+.h-btn-light {
+  color: $form-text-color;
+  background-color: $gray-200;
+}
+
+.h-btn-outline-light {
+  background-color: $white;
+  color: $form-text-color;
+  border-color: $input-border-color;
+}
+
+.h-btn-outline-transparent {
+  color: $form-text-color;
+  border: 1px solid $input-border-color;
+}