Avancement feuille de personnage

Avancement feuille d'items
Ajout des données JSON pour génération des compendiums.

styles/global/forms.less

@@ -0,0 +1,203 @@
+.bol {
+
+  input[readonly="true"] {
+    border: none;
+    color: dimgray;
+    cursor: not-allowed;
+    width: 100%;
+    vertical-align: middle;
+    background: transparent;
+  }
+
+  /*
+  Copied from dnd5e
+   */
+
+  input[type="text"],
+  input[type="number"],
+  input[type="text"]:hover,
+  input[type="number"]:hover,
+  input[type="text"]:focus,
+  input[type="number"]:focus {
+    //border: 1px solid #111;
+    //box-shadow: 0 0 8px #26641c;
+    border-radius: 0;
+    border: none;
+    box-shadow: none;
+  }
+
+  input:disabled,
+  select:disabled,
+  textarea:disabled {
+    //color: $colorOlive;
+  }
+
+  input:disabled:hover,
+  select:disabled:hover,
+  textarea:disabled:hover,
+  input:disabled:focus,
+  select:disabled:focus,
+  textarea:disabled:focus {
+    box-shadow: none !important;
+    border: 1px solid transparent !important;
+    outline: none !important;
+  }
+
+  button {
+    background: rgba(0, 0, 0, 0.1);
+    //border: $borderGroove;
+  }
+
+  select {
+    //-webkit-appearance: none;
+    //-moz-appearance: none;
+    //color: $c-black;
+    //color: $colorDark;
+    //font-family: $font-primary;
+    font-size: 14px;
+    text-align: center;
+    text-align-last: center;
+    -moz-text-align-last: center;
+    width: 100%;
+    border: none;
+    border-radius: 0;
+
+    //  height: calc(100% - 2px);
+    //  //border: 1px solid $colorTan;
+    //  background: rgba(0, 0, 0, 0.05);
+    //  border-radius: 0;
+    //  border: none;
+    //  box-shadow: none;
+    //  color: $colorDark;
+  }
+
+
+  label.checkbox {
+    flex: auto;
+    padding: 0;
+    margin: 0;
+    height: 22px;
+    line-height: 22px;
+    font-size: 11px;
+
+    > input[type="checkbox"] {
+      width: 16px;
+      height: 16px;
+      margin: 0 2px 0 0;
+      position: relative;
+      top: 4px;
+    }
+
+    &.right > input[type="checkbox"] {
+      margin: 0 0 0 2px;
+    }
+  }
+
+  /* Form Groups */
+
+  .form-group {
+    label {
+      flex: 2;
+      //color: $colorOlive;
+      font-weight: bold;
+    }
+
+    .form-fields {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+
+      > * {
+        flex: 1;
+        margin: 0 3px 0 0;
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+        .flex1 {
+          flex: 1;
+        }
+
+        .flex2 {
+          flex: 2;
+        }
+
+        .flex3 {
+          flex: 3;
+        }
+
+        .flex4 {
+          flex: 4;
+        }
+      }
+
+      label {
+        flex: 0 0 100%;
+        margin: 0;
+
+        &.checkbox {
+          flex: auto;
+          text-align: left;
+        }
+      }
+
+    }
+
+    // Stacked Groups
+    &.stacked {
+      label {
+        flex: 0 0 100%;
+        margin: 0;
+
+        &.checkbox {
+          flex: auto;
+          text-align: left;
+        }
+      }
+    }
+  }
+
+  .form-header {
+    margin: 0 0 0.25em 0;
+    padding: 2px 0;
+    //border-top: $borderGroove;
+    //border-bottom: $borderGroove;
+    //font-family: $font-tertiary;
+    font-size: 20px;
+    font-weight: 700;
+  }
+
+  .tag {
+    display: inline-block;
+    margin: 0 2px 0 0;
+    padding: 0 3px;
+    font-size: 10px;
+    line-height: 16px;
+    border: 1px solid #999;
+    border-radius: 3px;
+    background: rgba(0, 0, 0, 0.05);
+  }
+
+  /*
+   Placeholders
+   */
+
+  ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+    color: lightgray;
+    opacity: 1; /* Firefox */
+  }
+
+  :-ms-input-placeholder { /* Internet Explorer 10-11 */
+    color: lightgray;;
+  }
+
+  ::-ms-input-placeholder { /* Microsoft Edge */
+    color: lightgray;;
+  }
+
+  input::placeholder {
+    color: lightgray;
+  }
+}