headmin 0.2.6 → 0.3.2

data/{src/scss → app/assets/stylesheets}/headmin/form.scss

@@ -5,6 +5,10 @@ input[type="search"] {
   padding-left: 35px
 }
 
+.form-control[readonly] {
+  background-color: transparent;
+}
+
 .form-label[required="required"]:after {
   content: '*';
   margin-left: 1px;
@@ -23,7 +27,7 @@ input[type="search"] {
 .repeater-row {
   position: relative;
 
-  &:hover {
+  :hover {
     & > .repeater-row-remove {
       visibility: visible;
     }
@@ -76,4 +80,53 @@ input[type="search"] {
   z-index: 2;
   visibility: hidden;
   cursor: move;
-}
+}
+
+.h-form-file {
+  position: relative;
+
+  .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/syntax.scss

@@ -0,0 +1,349 @@
+// 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;
+  }
+}

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

@@ -0,0 +1,20 @@
+.h-thumbnail {
+  display: inline-block;
+  position: relative;
+}
+
+.h-thumbnail-bg {
+  background-color: $gray-100;
+  background-size: cover;
+  background-position: center center;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.h-thumbnail-icon {
+  position: absolute;
+  top: calc(50% - 20px);
+  left: calc(50% - 14px);
+  font-size: 28px;
+}

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

@@ -0,0 +1,68 @@
+.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;
+}
+
+.h-dropzone {
+  border: 2px dashed $input-border-color;
+  border-radius: $border-radius;
+
+  // Direct children
+  & > *:not(input[type="file"]) {
+    pointer-events: none;
+    z-index: 2;
+  }
+
+  &.dragover, &:hover {
+    border-color: $gray-400;
+  }
+
+  &.dragover {
+    input[type="file"] {
+      z-index: 3
+    }
+  }
+
+  &.active {
+    border-color: $input-focus-border-color;
+    outline: 0;
+    @if $enable-shadows {
+      @include box-shadow($input-box-shadow, $input-focus-box-shadow);
+    } @else {
+      box-shadow: $input-focus-box-shadow;
+    }
+  }
+
+  input[type="file"] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    z-index: 1;
+  }
+}
+
+.h-dropzone-placeholder {
+  color: $input-placeholder-color;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}

data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_accordion.scss

@@ -0,0 +1,118 @@
+//
+// Base styles
+//
+
+.accordion-button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: $accordion-button-padding-y $accordion-button-padding-x;
+  @include font-size($font-size-base);
+  color: $accordion-button-color;
+  text-align: left; // Reset button style
+  background-color: $accordion-button-bg;
+  border: 0;
+  @include border-radius(0);
+  overflow-anchor: none;
+  @include transition($accordion-transition);
+
+  &:not(.collapsed) {
+    color: $accordion-button-active-color;
+    background-color: $accordion-button-active-bg;
+    box-shadow: inset 0 ($accordion-border-width * -1) 0 $accordion-border-color;
+
+    &::after {
+      background-image: escape-svg($accordion-button-active-icon);
+      transform: $accordion-icon-transform;
+    }
+  }
+
+  // Accordion icon
+  &::after {
+    flex-shrink: 0;
+    width: $accordion-icon-width;
+    height: $accordion-icon-width;
+    margin-left: auto;
+    content: "";
+    background-image: escape-svg($accordion-button-icon);
+    background-repeat: no-repeat;
+    background-size: $accordion-icon-width;
+    @include transition($accordion-icon-transition);
+  }
+
+  &:hover {
+    z-index: 2;
+  }
+
+  &:focus {
+    z-index: 3;
+    border-color: $accordion-button-focus-border-color;
+    outline: 0;
+    box-shadow: $accordion-button-focus-box-shadow;
+  }
+}
+
+.accordion-header {
+  margin-bottom: 0;
+}
+
+.accordion-item {
+  background-color: $accordion-bg;
+  border: $accordion-border-width solid $accordion-border-color;
+
+  &:first-of-type {
+    @include border-top-radius($accordion-border-radius);
+
+    .accordion-button {
+      @include border-top-radius($accordion-inner-border-radius);
+    }
+  }
+
+  &:not(:first-of-type) {
+    border-top: 0;
+  }
+
+  // Only set a border-radius on the last item if the accordion is collapsed
+  &:last-of-type {
+    @include border-bottom-radius($accordion-border-radius);
+
+    .accordion-button {
+      &.collapsed {
+        @include border-bottom-radius($accordion-inner-border-radius);
+      }
+    }
+
+    .accordion-collapse {
+      @include border-bottom-radius($accordion-border-radius);
+    }
+  }
+}
+
+.accordion-body {
+  padding: $accordion-body-padding-y $accordion-body-padding-x;
+}
+
+
+// Flush accordion items
+//
+// Remove borders and border-radius to keep accordion items edge-to-edge.
+
+.accordion-flush {
+  .accordion-collapse {
+    border-width: 0;
+  }
+
+  .accordion-item {
+    border-right: 0;
+    border-left: 0;
+    @include border-radius(0);
+
+    &:first-child { border-top: 0; }
+    &:last-child { border-bottom: 0; }
+
+    .accordion-button {
+      @include border-radius(0);
+    }
+  }
+}

data/app/assets/stylesheets/headmin/vendor/bootstrap/scss/_alert.scss

@@ -0,0 +1,57 @@
+//
+// Base styles
+//
+
+.alert {
+  position: relative;
+  padding: $alert-padding-y $alert-padding-x;
+  margin-bottom: $alert-margin-bottom;
+  border: $alert-border-width solid transparent;
+  @include border-radius($alert-border-radius);
+}
+
+// Headings for larger alerts
+.alert-heading {
+  // Specified to prevent conflicts of changing $headings-color
+  color: inherit;
+}
+
+// Provide class for links that match alerts
+.alert-link {
+  font-weight: $alert-link-font-weight;
+}
+
+
+// Dismissible alerts
+//
+// Expand the right padding and account for the close button's positioning.
+
+.alert-dismissible {
+  padding-right: $alert-dismissible-padding-r;
+
+  // Adjust close link position
+  .btn-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: $stretched-link-z-index + 1;
+    padding: $alert-padding-y * 1.25 $alert-padding-x;
+  }
+}
+
+
+// scss-docs-start alert-modifiers
+// Generate contextual modifier classes for colorizing the alert.
+
+@each $state, $value in $theme-colors {
+  $alert-background: shift-color($value, $alert-bg-scale);
+  $alert-border: shift-color($value, $alert-border-scale);
+  $alert-color: shift-color($value, $alert-color-scale);
+  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
+    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
+  }
+  .alert-#{$state} {
+    @include alert-variant($alert-background, $alert-border, $alert-color);
+  }
+}
+// scss-docs-end alert-modifiers