Skip to content

Commit

Permalink
Merge pull request #140 from legalthings/Bulma_variant
Browse files Browse the repository at this point in the history 
Bulma variant
  • Loading branch information
@jasny
jasny committed Feb 11, 2020
2 parents 10b0f61 + 3323f69 commit 2a5076c
Show file tree
Hide file tree
Showing 47 changed files with 1,692 additions and 322 deletions.
112 changes: 112 additions & 0 deletions bulma.html
View file
@@ -0,0 +1,112 @@
<!DOCTYPE html>
<html>
<head>
<title>LegalForm.js demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-calendar@6.0.7/dist/css/bulma-calendar.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-tooltip@3.0.2/dist/css/bulma-tooltip.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400italic,700">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/perfect-scrollbar@1.4.0/css/perfect-scrollbar.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css"/>

<link rel="stylesheet" href="css/wizard.css">
<link rel="stylesheet" href="css/likert.css">
<link rel="stylesheet" href="css/general.css">
<link rel="stylesheet" href="css/bulma.css">
</head>
<body style="padding: 20px 10px">
<div class="container">
<h1 class="title is-1">LegalForm.js demo (Bulma)</h1>

<div id="doc">
<div id="doc-help">
</div>
</div>

<div id="doc-wizard" class="wizard"></div>

<div class="wizards-actions template">
<button data-target="#doc-wizard" data-toggle="wizard" data-step="prev" class="wizard-hide">Previous</button>
<button data-target="#doc-wizard" data-toggle="wizard" data-step="next" class="wizard-hide">Next</button>
<button data-target="#doc-wizard" data-toggle="wizard" data-step="done" class="wizard-hide">Finish</button>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/locale/nl.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/locale/en-gb.js"></script>
<script src="https://unpkg.com/imask"></script>
<script src="https://cdn.jsdelivr.net/npm/bulma-calendar@6.0.7/dist/js/bulma-calendar.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/perfect-scrollbar@1.4.0/dist/perfect-scrollbar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ractive/0.9.13/ractive.min.js"></script>
<script src="https://cdn.rawgit.com/jmespath/jmespath.js/master/jmespath.js"></script>

<script src="js/dom/dom-utils.js"></script>
<script src="js/dom/dom.js"></script>
<script src="js/dom/dom-element.js"></script>
<script src="js/dom/dom-list.js"></script>
<script src="js/variants/bulma/init-trait.js"></script>
<script src="js/variants/bulma/on-change-trait.js"></script>
<script src="js/variants/bulma/helper-trait.js"></script>
<script src="js/variants/bulma/build-form-trait.js"></script>
<script src="js/variants/bulma/init-external-fields-trait.js"></script>
<script src="js/variants/bulma/init-fields-trait.js"></script>
<script src="js/variants/bulma/tooltip-trait.js"></script>
<script src="js/variants/bulma.js"></script>
<script src="js/lib/form-validator/bulma.js"></script>
<script src="js/lib/form-validator.js"></script>
<script src="js/lib/scroll-top.js"></script>
<script src="js/lib/strbind.js"></script>
<script src="js/lib/attr-string.js"></script>
<script src="js/lib/init-traits.js"></script>
<script src="js/lib/form-wizard.js"></script>
<script src="js/lib/moment-custom.js"></script>
<script src="js/lib/define-property.js"></script>
<script src="js/lib/escape-dots.js"></script>
<script src="js/lib/unescape-dots.js"></script>
<script src="js/lib/ltri-to-url.js"></script>
<script src="js/lib/calculation-vars.js"></script>
<script src="js/lib/expand-condition.js"></script>
<script src="js/lib/parse-number.js"></script>
<script src="js/lib/cloner.js"></script>
<script src="js/lib/dot-key.js"></script>
<script src="js/lib/amount-to-string.js"></script>
<script src="js/lib/clear-computed-url.js"></script>
<script src="js/lib/combine-headers-names-and-values.js"></script>
<script src="js/lib/ractive-dynamic-computed.js"></script>
<script src="js/lib/ends-with.js"></script>
<script src="js/lib/meta-recursive.js"></script>
<script src="js/lib/is-object.js"></script>
<script src="js/lib/ajax.js"></script>
<script src="js/lib/camel-case.js"></script>
<script src="js/model/form-model.js"></script>
<script src="js/model/legalform-model.js"></script>
<script src="js/model/live-contract-form-model.js"></script>
<script src="js/legalform-validation/validator-trait.js"></script>
<script src="js/ractive-legalform/wizard-trait.js"></script>
<script src="js/ractive-legalform/repeated-steps-trait.js"></script>
<script src="js/ractive-legalform/on-change-trait.js"></script>
<script src="js/ractive-legalform/keypath-type-trait.js"></script>
<script src="js/ractive-legalform/init-preview-switch-trait.js"></script>
<script src="js/ractive-legalform/init-fields-trait.js"></script>
<script src="js/ractive-legalform/init-exernal-fields-trait.js"></script>
<script src="js/ractive-legalform/helper-trait.js"></script>
<script src="js/ractive-legalform/form-scroll-trait.js"></script>
<script src="js/ractive-legalform/base.js"></script>
<script src="js/ractive-legalform.js"></script>
<script src="js/legalform.js"></script>
<script src="js/legalform-calc.js"></script>
<script src="js/legalform-html.js"></script>
<script src="js/legalform-validation.js"></script>

<script src="js/demo/legalform.js"></script>
</body>
</html>
134 changes: 134 additions & 0 deletions css/bulma.css
View file
@@ -0,0 +1,134 @@
.field.has-addons {
flex-wrap: wrap;
}

.field.has-addons > label {
width: 100%;
}

label.label {
text-align: left;
}

.datepicker .datepicker-body {
display: block;
}

.datetimepicker {
z-index: 2;
}

.radio, .checkbox {
display: block;
}

.radio + .radio {
margin-left: 0;
}

.field:last-child {
margin-bottom: .75rem;
}

.datetimepicker-dummy .datetimepicker-dummy-wrapper {
background-color: #fff;
border-color: #dbdbdb;
border-radius: 4px;
color: #363636;
box-shadow: inset 0 .0625em .125em rgba(10,10,10,.05);
}

.datetimepicker-dummy .datetimepicker-dummy-wrapper:hover {
border-color: #b5b5b5;
}

.field.has-error input:not([type="checkbox"]),
.field.has-error select,
.field.has-error textarea {
border-color: #a94442;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}

.field.has-error label.checkbox {
color: #a94442;
}

.field {
position: relative;
}

[data-tooltip].shown:not(.is-disabled)::before,
[data-tooltip].shown:not(.is-disabled)::after,
[data-tooltip].shown:not(.is-loading)::before,
[data-tooltip].shown:not(.is-loading)::after,
[data-tooltip].shown:not([disabled])::before,
[data-tooltip].shown:not([disabled])::after {
opacity: 1;
visibility: visible;
}

[data-tooltip].shown:not(.is-disabled)::before,
[data-tooltip].shown:not(.is-loading)::before,
[data-tooltip].shown:not([disabled])::before {
background: rgb(0, 0, 0);
font-size: 14px;
}

[data-tooltip].shown.has-tooltip-right:not(.is-disabled)::after,
[data-tooltip].shown.has-tooltip-right:not(.is-loading)::after,
[data-tooltip].shown.has-tooltip-right:not([disabled])::after {
border-color: transparent rgb(0, 0, 0) transparent transparent;
}

[data-tooltip].shown.has-tooltip-left:not(.is-disabled)::after,
[data-tooltip].shown.has-tooltip-left:not(.is-loading)::after,
[data-tooltip].shown.has-tooltip-left:not([disabled])::after {
border-color: transparent transparent transparent rgb(0, 0, 0);
}

.wizard [data-role="wrapper"] > .help {
font-size: 20px;
opacity: 0.7;
}

.select.with-choices:not(.is-multiple):not(.is-loading)::after {
border: none;
}

.choices__item, .choices__list--dropdown .choices__item {
font-size: 1rem;
}

.choices__inner {
background-color: #fff;
height: 40px;
min-height: 40px;
padding-top: 1.5px;
}

.choices__inner:hover {
border-color: #b5b5b5;
}

.notification-fixed-top {
position: fixed;
top: 0;
left: 0;
z-index: 1035;
width: 100%;
margin: 0;
border-radius: 0;
border-width: 0 0 1px 0;
}

@media (min-width: 992px) {
.notification-fixed-top {
left: 50%;
width: 992px;
margin-left: -496px;
border-width: 0 1px 1px 1px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
}
2 changes: 1 addition & 1 deletion css/general.css
View file
Expand Up @@ -22,7 +22,7 @@
position: relative;
}

.wizard .form-group > .help {
.wizard [data-role="wrapper"] > .help {
display: block;
margin-right: 4px;
position: absolute;
Expand Down
45 changes: 45 additions & 0 deletions css/wizard.css
View file
@@ -0,0 +1,45 @@
.wizard {
position: relative;
overflow: hidden;
width: 100%;
}
.wizard > .wizard-step {
display: none;
position: relative;
-webkit-transition: 0.3s ease-in-out left;
-o-transition: 0.3s ease-in-out left;
transition: 0.3s ease-in-out left;
}
.wizard > .active,
.wizard > .next,
.wizard > .prev {
display: block;
}
.wizard > .active {
left: 0;
}
.wizard > .next,
.wizard > .prev {
position: absolute;
top: 0;
width: 100%;
}
.wizard > .next {
left: 100%;
}
.wizard > .prev {
left: -100%;
}
.wizard > .next.left,
.wizard > .prev.right {
left: 0;
}
.wizard > .active.left {
left: -100%;
}
.wizard > .active.right {
left: 100%;
}
.wizard-hide:not(.in) {
display: none;
}

0 comments on commit 2a5076c

Please sign in to comment.