diff --git a/web-frontend/public/grid.html b/web-frontend/public/grid.html
index cd97104cf..9c552588c 100644
--- a/web-frontend/public/grid.html
+++ b/web-frontend/public/grid.html
@@ -347,6 +347,84 @@
</div>
</div>
</div>
+ <div class="modal-wrapper">
+ <div class="modal-box">
+ <a href="#" class="modal-close">
+ <i class="fas fa-times"></i>
+ </a>
+ <h2 class="box-title">Orange Penquin</h2>
+ <form>
+ <div class="control">
+ <label class="control-label">
+ <i class="fas fa-font"></i>
+ Name
+ <a href="#" class="control-context">
+ <i class="fas fa-caret-down"></i>
+ </a>
+ </label>
+ <div class="control-elements">
+ <input type="text" class="input input-large" />
+ </div>
+ </div>
+ <div class="control">
+ <label class="control-label">
+ <i class="fas fa-hashtag"></i>
+ Price
+ <a href="#" class="control-context">
+ <i class="fas fa-caret-down"></i>
+ </a>
+ </label>
+ <div class="control-elements">
+ <input type="text" class="input input-large field-number" />
+ </div>
+ </div>
+ <div class="control">
+ <label class="control-label">
+ <i class="fas fa-check-square"></i>
+ Active
+ <a href="#" class="control-context">
+ <i class="fas fa-caret-down"></i>
+ </a>
+ </label>
+ <div class="control-elements">
+ <div class="field-boolean-checkbox">
+ <i class="fas fa-check check"></i>
+ </div>
+ </div>
+ </div>
+ <div class="control">
+ <label class="control-label">
+ <i class="fas fa-font"></i>
+ Description
+ <a href="#" class="control-context">
+ <i class="fas fa-caret-down"></i>
+ </a>
+ </label>
+ <div class="control-elements">
+ <input type="text" class="input input-large" />
+ </div>
+ </div>
+ <div class="control">
+ <label class="control-label">
+ <i class="fas fa-hashtag"></i>
+ Times sold
+ <a href="#" class="control-context">
+ <i class="fas fa-caret-down"></i>
+ </a>
+ </label>
+ <div class="control-elements">
+ <input type="text" class="input input-large field-number" />
+ </div>
+ </div>
+ <div class="actions">
+ <a href="#">
+ <i class="fas fa-plus"></i>
+ add field
+ </a>
+ </div>
+ </form>
+ </div>
+ </div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
(function() {
@@ -411,6 +489,14 @@
$(this).toggleClass("active");
}
});
+
+ $(".field-boolean-checkbox").click(function() {
+ $(this).toggleClass("active");
+ });
+
+ $(".modal-close").click(function() {
+ $(this).closest(".modal-wrapper").addClass("hidden");
+ });
})();
</script>
</body>
diff --git a/web-frontend/src/scss/abstracts/_variables.scss b/web-frontend/src/scss/abstracts/_variables.scss
index c71050ed6..d20da9b1a 100644
--- a/web-frontend/src/scss/abstracts/_variables.scss
+++ b/web-frontend/src/scss/abstracts/_variables.scss
@@ -4,8 +4,8 @@ $logo-font-stack: 'Montserrat', sans-serif;
$scrollbar-size: 6px;
$white: #fff;
+$black: #000;
-// primary colors
$color-primary-100: #ebf7ff !default;
$color-primary-200: #b5dbf5 !default;
$color-primary-300: #83c3eb !default;
@@ -16,7 +16,6 @@ $color-primary-700: #0f6499 !default;
$color-primary-800: #0a4970 !default;
$color-primary-900: #062e47 !default;
-// neutral colors
$color-neutral-50: #fafafa !default;
$color-neutral-100: #f5f5f5 !default;
$color-neutral-200: #d9dbde !default;
@@ -28,7 +27,6 @@ $color-neutral-700: #4d535c !default;
$color-neutral-800: #373c42 !default;
$color-neutral-900: #272b30 !default;
-// success colors
$color-success-100: #e6fff1 !default;
$color-success-200: #bdffdc !default;
$color-success-300: #9bf2c4 !default;
@@ -39,7 +37,6 @@ $color-success-700: #1d804b !default;
$color-success-800: #155c36 !default;
$color-success-900: #0d3821 !default;
-// warning colors
$color-warning-100: #fff6e6 !default;
$color-warning-200: #ffe9c2 !default;
$color-warning-300: #ffe0ab !default;
@@ -50,7 +47,6 @@ $color-warning-700: #9c7024 !default;
$color-warning-800: #7a5515 !default;
$color-warning-900: #573907 !default;
-// error colors
$color-error-100: #ffe8e6 !default;
$color-error-200: #ffbfb8 !default;
$color-error-300: #f7a499 !default;
@@ -60,3 +56,9 @@ $color-error-600: #bf4232 !default;
$color-error-700: #9c2e1f !default;
$color-error-800: #6e160b !default;
$color-error-900: #4d0c03 !default;
+
+// all z-indexes
+$z-index-layout-col-1: 3;
+$z-index-layout-col-2: 2;
+$z-index-layout-col-3: 1;
+$z-index-modal: 4;
diff --git a/web-frontend/src/scss/base/_helpers.scss b/web-frontend/src/scss/base/_helpers.scss
index 2143c8731..89dad5c1d 100644
--- a/web-frontend/src/scss/base/_helpers.scss
+++ b/web-frontend/src/scss/base/_helpers.scss
@@ -23,14 +23,14 @@
@keyframes spin {
0% {
- transform:rotate(0);
+ transform: rotate(0);
}
50% {
- transform:rotate(360deg);
+ transform: rotate(360deg);
}
100% {
- transform:rotate(720deg);
+ transform: rotate(720deg);
}
}
diff --git a/web-frontend/src/scss/components/_box.scss b/web-frontend/src/scss/components/_box.scss
index 9d30b9249..4319ac8f3 100644
--- a/web-frontend/src/scss/components/_box.scss
+++ b/web-frontend/src/scss/components/_box.scss
@@ -1,7 +1,7 @@
.box {
- background-color: #fff;
+ background-color: $white;
border-radius: 6px;
- box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.16);
+ box-shadow: 0 3px 10px 0 rgba($black, 0.16);
padding: 32px 40px;
}
diff --git a/web-frontend/src/scss/components/_button.scss b/web-frontend/src/scss/components/_button.scss
index 0a08a2b82..d05e2de8c 100644
--- a/web-frontend/src/scss/components/_button.scss
+++ b/web-frontend/src/scss/components/_button.scss
@@ -81,6 +81,6 @@
border: 0.25em solid;
border-color: #fff transparent #fff transparent;
animation: spin infinite 1800ms;
- animation-timing-function: cubic-bezier(.785, .135, .15, .86);
+ animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
}
diff --git a/web-frontend/src/scss/components/_form.scss b/web-frontend/src/scss/components/_form.scss
index bb0041a19..6b3588f33 100644
--- a/web-frontend/src/scss/components/_form.scss
+++ b/web-frontend/src/scss/components/_form.scss
@@ -9,6 +9,16 @@
margin-bottom: 16px;
}
+.control-context {
+ color: $color-primary-900;
+ margin-left: 6px;
+
+ &:hover {
+ text-decoration: none;
+ color:$color-neutral-500;
+ }
+}
+
.input {
display: block;
width: 100%;
diff --git a/web-frontend/src/scss/components/_layout.scss b/web-frontend/src/scss/components/_layout.scss
index 23fa3e755..bf352abfc 100644
--- a/web-frontend/src/scss/components/_layout.scss
+++ b/web-frontend/src/scss/components/_layout.scss
@@ -8,7 +8,7 @@
.layout-col-1 {
position: absolute;
- z-index: 3;
+ z-index: $z-index-layout-col-1;
left: 0;
top: 0;
bottom: 0;
@@ -17,7 +17,7 @@
.layout-col-2 {
position: absolute;
- z-index: 2;
+ z-index: $z-index-layout-col-2;
left: 52px;
top: 0;
bottom: 0;
@@ -26,7 +26,7 @@
.layout-col-3 {
position: absolute;
- z-index: 1;
+ z-index: $z-index-layout-col-3;
left: 278px;
top: 0;
bottom: 0;
diff --git a/web-frontend/src/scss/components/_modal.scss b/web-frontend/src/scss/components/_modal.scss
new file mode 100644
index 000000000..2acedb9ea
--- /dev/null
+++ b/web-frontend/src/scss/components/_modal.scss
@@ -0,0 +1,37 @@
+.modal-wrapper {
+ @include absolute(0);
+
+ overflow: auto;
+ z-index: $z-index-modal;
+ background-color: rgba($color-neutral-700, 0.16);
+}
+
+.modal-box {
+ @extend .box;
+
+ position: relative;
+ margin: 40px auto;
+ max-width: 660px;
+ background-color: $white;
+ border-radius: 3px;
+
+ .box-title {
+ margin-top: 0;
+ }
+}
+
+.modal-close {
+ @include absolute(20px, 20px, auto, auto);
+ font-size: 20px;
+ color: $color-neutral-400;
+
+ &:hover {
+ color: $color-neutral-800;
+ }
+}
+
+.modal-head {
+ padding-bottom: 24px;
+ margin-bottom: 24px;
+ border-bottom: solid 1px $color-neutral-200;
+}
diff --git a/web-frontend/src/scss/components/fields/_boolean.scss b/web-frontend/src/scss/components/fields/_boolean.scss
new file mode 100644
index 000000000..bb5af7f23
--- /dev/null
+++ b/web-frontend/src/scss/components/fields/_boolean.scss
@@ -0,0 +1,20 @@
+.field-boolean-checkbox {
+ border: 1px solid $color-neutral-200;
+ border-radius: 3px;
+ color: $color-success-600;
+ cursor: pointer;
+
+ @include center-text(18px, 11px);
+
+ .field-boolean-checkbox.active & {
+ border-color: $color-neutral-300;
+ }
+
+ .check {
+ visibility: hidden;
+ }
+
+ &.active .check {
+ visibility: visible;
+ }
+}
diff --git a/web-frontend/src/scss/components/fields/_number.scss b/web-frontend/src/scss/components/fields/_number.scss
new file mode 100644
index 000000000..895303472
--- /dev/null
+++ b/web-frontend/src/scss/components/fields/_number.scss
@@ -0,0 +1,3 @@
+.field-number {
+ max-width: 280px;
+}
diff --git a/web-frontend/src/scss/default.scss b/web-frontend/src/scss/default.scss
index d34881137..aebe7b1b9 100755
--- a/web-frontend/src/scss/default.scss
+++ b/web-frontend/src/scss/default.scss
@@ -18,6 +18,10 @@
@import "components/tree";
@import "components/header";
@import "components/scrollbar";
+@import "components/modal";
+
+@import "components/fields/boolean";
+@import "components/fields/number";
@import "components/views/grid";
@import "components/views/grid/text";