formstrap 0.1.0

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

@@ -0,0 +1,27 @@
+.h-autocomplete {
+  --fs-dropdown-z-index: 1000;
+  --fs-dropdown-font-size: 1rem;
+  --fs-dropdown-border-radius: 0.375rem;
+  --fs-dropdown-box-shadow: 0 0.5rem 1rem rgba(var(--bs-body-color-rgb), 0.15);
+
+  position: absolute;
+  top: calc(100% + 2px);
+  left: 0;
+  z-index: var(--fs-dropdown-z-index);
+  width: 100%;
+  //@include reset-text();
+  //@include font-size($dropdown-font-size);
+  font-size: var(--fs-dropdown-font-size);
+  word-wrap: break-word;
+  background-color: var(--bs-body-bg);
+  background-clip: padding-box;
+  border-radius: var(--fs-dropdown-border-radius) !important;
+  box-shadow: var(--fs-dropdown-box-shadow);
+  border: var(--bs-border-width) solid var(--bs-border-color-translucent);
+  overflow: hidden;
+
+  .list-group-flush {
+    margin: 0;
+    padding: 0;
+  }
+}

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

@@ -0,0 +1,83 @@
+.h-form-file {
+  --fs-file-spacer-2: 1rem * .5;
+
+  .h-form-file-thumbnails {
+    margin-bottom: var(--fs-file-spacer-2);
+  }
+
+  &.h-dropzone {
+    padding: var(--fs-file-spacer-2);
+
+    .h-form-file-thumbnails {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.h-form-file-thumbnails {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--fs-file-spacer-2);
+
+  a, a:link, a:hover {
+    color: inherit;
+    text-decoration: inherit;
+  }
+}
+
+.h-form-file-thumbnail {
+  position: relative;
+  pointer-events: initial !important;
+  display: flex;
+
+  &:hover {
+    .h-form-file-thumbnail-actions {
+      display: block;
+    }
+  }
+}
+
+.h-form-file-thumbnail-actions {
+  display: none;
+}
+
+.h-form-file-thumbnail-remove {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  background: var(--bs-danger);
+  width: 25px;
+  height: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  border-radius: var(--bs-border-radius-pill);
+  z-index: 3;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.9;
+  }
+}
+
+.h-form-file-thumbnail-edit {
+  position: absolute;
+  top: 5px;
+  right: 35px;
+  background-color: rgba(0, 0, 0, 0.7);
+  width: 25px;
+  height: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--bs-border-radius-pill);
+  z-index: 3;
+  cursor: pointer;
+  color: white !important;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 1);
+  }
+}

data/app/assets/stylesheets/formstrap/forms/media.scss

@@ -0,0 +1,10 @@
+.h-form-media-validation {
+  opacity: 0;
+  width: 100px;
+  height: 0;
+  padding: 0;
+  margin: 0;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}

data/app/assets/stylesheets/formstrap/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/formstrap/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/formstrap/forms.scss

@@ -0,0 +1,12 @@
+.form-label[required="required"], .form-check-label[required="required"] {
+  &:after {
+    content: ' *';
+    color: var(--bs-danger-rgb);
+  }
+}
+
+@import "forms/autocomplete";
+@import "forms/file";
+@import "forms/media";
+@import "forms/repeater";
+@import "forms/search";

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

@@ -0,0 +1,18 @@
+html {
+  height: 100%;
+}
+
+.list-group-item {
+  --fs-list-group-active-color: #fff;
+  &.active {
+    .text-muted {
+      color: var(--fs-list-group-active-color) !important;
+    }
+  }
+}
+
+mark {
+  --fs-mark-padding: .1875em;
+  padding: 0;
+  box-shadow: 0 var(--fs-mark-padding) 0 var(--bs-yellow), 0 calc(-1 * #{var(--fs-mark-padding)}) 0 var(--bs-yellow);
+}

data/app/assets/stylesheets/formstrap/media/index.scss

@@ -0,0 +1,9 @@
+.media-modal {
+  .h-thumbnail {
+    cursor: pointer;
+  }
+
+  input[type="checkbox"]:checked + label .h-thumbnail {
+    background-color: #0d6efd;
+  }
+}

data/app/assets/stylesheets/formstrap/media.scss

@@ -0,0 +1 @@
+@import "media/index";

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

@@ -0,0 +1,27 @@
+.btn-link {
+  text-decoration: none;
+}
+
+.h-btn-light {
+  color: var(--bs-gray-600);
+  background-color: var(--bs-gray-200);
+  box-shadow: none;
+}
+
+.h-btn-outline-light {
+  background-color: var(--bs-white);
+  color: var(--bs-gray-600);
+  border-color: var(--bs-gray-300);
+  box-shadow: none;
+
+  &:hover, &:focus {
+    background-color: var(--bs-white);
+    border-color: var(--bs-gray-300);
+  }
+}
+
+.h-btn-outline-transparent {
+  color: var(--bs-gray-600);
+  border: 1px solid var(--bs-gray-300);
+  box-shadow: none;
+}

data/app/assets/stylesheets/formstrap/utilities/dropzone.scss

@@ -0,0 +1,72 @@
+.h-dropzone {
+  --fs-input-btn-focus-blur: 0;
+  --fs-input-btn-focus-width: .25rem;
+  --fs-input-btn-focus-color-opacity: .25;
+
+  position: relative;
+  border: 2px dashed var(--bs-gray-400);
+  border-radius: var(--bs-border-radius);
+
+  // Direct children
+  & > *:not(.form-control) {
+    margin: 0.5rem;
+    pointer-events: none;
+    z-index: 2;
+  }
+
+  &.dragover, &:hover {
+    border-color: var(--bs-gray-400);
+  }
+
+  &.dragover {
+    input[type="file"] {
+      z-index: 3
+    }
+  }
+
+  &.focus, &.dragover {
+    border-color: var(--bs-primary-border-subtle);
+    outline: 0;
+    box-shadow: var(--bs-box-shadow);
+
+    &.is-valid {
+      border-color: var(--bs-success);
+      box-shadow: 0 0 var(--fs-input-btn-focus-blur) var(--fs-input-btn-focus-width) rgba(var(--bs-success), var(--fs-input-btn-focus-color-opacity));
+    }
+
+    &.is-invalid {
+      border-color: var(--bs-danger);
+      box-shadow: 0 0 var(--fs-input-btn-focus-blur) var(--fs-input-btn-focus-width) rgba(var(--bs-danger), var(--fs-input-btn-focus-color-opacity));
+    }
+  }
+
+  .form-control {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    border: none;
+    box-shadow: none;
+    text-indent: -100vw;
+    color: transparent;
+    background: none
+  }
+
+  &.is-invalid {
+    border-color: var(--bs-danger);
+  }
+
+  &.is-valid {
+    border-color: var(--bs-success);
+  }
+}
+
+.h-dropzone-placeholder {
+  color: var(--bs-gray-600);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}

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

@@ -0,0 +1,2 @@
+@import "utilities/buttons";
+@import "utilities/dropzone";