archive/bramw_baserow
1
0
Fork 0
mirror of https://gitlab.com/bramw/baserow.git synced 2025-04-17 10:22:36 +00:00
Code Issues Projects Releases Wiki Activity

created row modal styling

Browse source
This commit is contained in:
Bram Wiepjes 2019-03-22 15:17:44 +01:00
parent d69091876f
commit 1bbc35b8fd
11 changed files with 176 additions and 14 deletions

86
web-frontend/public/grid.html
View file

@ -347,6 +347,84 @@
</div> </div>
</div> </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 src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script> <script>
(function() { (function() {
@ -411,6 +489,14 @@
$(this).toggleClass("active"); $(this).toggleClass("active");
} }
}); });
$(".field-boolean-checkbox").click(function() {
$(this).toggleClass("active");
});
$(".modal-close").click(function() {
$(this).closest(".modal-wrapper").addClass("hidden");
});
})(); })();
</script> </script>
</body> </body>

12
web-frontend/src/scss/abstracts/_variables.scss
View file

@ -4,8 +4,8 @@ $logo-font-stack: 'Montserrat', sans-serif;
$scrollbar-size: 6px; $scrollbar-size: 6px;
$white: #fff; $white: #fff;
$black: #000;
// primary colors
$color-primary-100: #ebf7ff !default; $color-primary-100: #ebf7ff !default;
$color-primary-200: #b5dbf5 !default; $color-primary-200: #b5dbf5 !default;
$color-primary-300: #83c3eb !default; $color-primary-300: #83c3eb !default;
@ -16,7 +16,6 @@ $color-primary-700: #0f6499 !default;
$color-primary-800: #0a4970 !default; $color-primary-800: #0a4970 !default;
$color-primary-900: #062e47 !default; $color-primary-900: #062e47 !default;
// neutral colors
$color-neutral-50: #fafafa !default; $color-neutral-50: #fafafa !default;
$color-neutral-100: #f5f5f5 !default; $color-neutral-100: #f5f5f5 !default;
$color-neutral-200: #d9dbde !default; $color-neutral-200: #d9dbde !default;
@ -28,7 +27,6 @@ $color-neutral-700: #4d535c !default;
$color-neutral-800: #373c42 !default; $color-neutral-800: #373c42 !default;
$color-neutral-900: #272b30 !default; $color-neutral-900: #272b30 !default;
// success colors
$color-success-100: #e6fff1 !default; $color-success-100: #e6fff1 !default;
$color-success-200: #bdffdc !default; $color-success-200: #bdffdc !default;
$color-success-300: #9bf2c4 !default; $color-success-300: #9bf2c4 !default;
@ -39,7 +37,6 @@ $color-success-700: #1d804b !default;
$color-success-800: #155c36 !default; $color-success-800: #155c36 !default;
$color-success-900: #0d3821 !default; $color-success-900: #0d3821 !default;
// warning colors
$color-warning-100: #fff6e6 !default; $color-warning-100: #fff6e6 !default;
$color-warning-200: #ffe9c2 !default; $color-warning-200: #ffe9c2 !default;
$color-warning-300: #ffe0ab !default; $color-warning-300: #ffe0ab !default;
@ -50,7 +47,6 @@ $color-warning-700: #9c7024 !default;
$color-warning-800: #7a5515 !default; $color-warning-800: #7a5515 !default;
$color-warning-900: #573907 !default; $color-warning-900: #573907 !default;
// error colors
$color-error-100: #ffe8e6 !default; $color-error-100: #ffe8e6 !default;
$color-error-200: #ffbfb8 !default; $color-error-200: #ffbfb8 !default;
$color-error-300: #f7a499 !default; $color-error-300: #f7a499 !default;
@ -60,3 +56,9 @@ $color-error-600: #bf4232 !default;
$color-error-700: #9c2e1f !default; $color-error-700: #9c2e1f !default;
$color-error-800: #6e160b !default; $color-error-800: #6e160b !default;
$color-error-900: #4d0c03 !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;

6
web-frontend/src/scss/base/_helpers.scss
View file

@ -23,14 +23,14 @@
@keyframes spin { @keyframes spin {
0% { 0% {
transform:rotate(0); transform: rotate(0);
} }
50% { 50% {
transform:rotate(360deg); transform: rotate(360deg);
} }
100% { 100% {
transform:rotate(720deg); transform: rotate(720deg);
} }
} }

4
web-frontend/src/scss/components/_box.scss
View file

@ -1,7 +1,7 @@
.box { .box {
background-color: #fff; background-color: $white;
border-radius: 6px; 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; padding: 32px 40px;
} }

2
web-frontend/src/scss/components/_button.scss
View file

@ -81,6 +81,6 @@
border: 0.25em solid; border: 0.25em solid;
border-color: #fff transparent #fff transparent; border-color: #fff transparent #fff transparent;
animation: spin infinite 1800ms; 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);
} }
} }

10
web-frontend/src/scss/components/_form.scss
View file

@ -9,6 +9,16 @@
margin-bottom: 16px; margin-bottom: 16px;
} }
.control-context {
color: $color-primary-900;
margin-left: 6px;
&:hover {
text-decoration: none;
color:$color-neutral-500;
}
}
.input { .input {
display: block; display: block;
width: 100%; width: 100%;

6
web-frontend/src/scss/components/_layout.scss
View file

@ -8,7 +8,7 @@
.layout-col-1 { .layout-col-1 {
position: absolute; position: absolute;
z-index: 3; z-index: $z-index-layout-col-1;
left: 0; left: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -17,7 +17,7 @@
.layout-col-2 { .layout-col-2 {
position: absolute; position: absolute;
z-index: 2; z-index: $z-index-layout-col-2;
left: 52px; left: 52px;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -26,7 +26,7 @@
.layout-col-3 { .layout-col-3 {
position: absolute; position: absolute;
z-index: 1; z-index: $z-index-layout-col-3;
left: 278px; left: 278px;
top: 0; top: 0;
bottom: 0; bottom: 0;

37
web-frontend/src/scss/components/_modal.scss Normal file
View file

@ -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;
}

20
web-frontend/src/scss/components/fields/_boolean.scss Normal file
View file

@ -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;
}
}

3
web-frontend/src/scss/components/fields/_number.scss Normal file
View file

@ -0,0 +1,3 @@
.field-number {
max-width: 280px;
}

4
web-frontend/src/scss/default.scss
View file

@ -18,6 +18,10 @@
@import "components/tree"; @import "components/tree";
@import "components/header"; @import "components/header";
@import "components/scrollbar"; @import "components/scrollbar";
@import "components/modal";
@import "components/fields/boolean";
@import "components/fields/number";
@import "components/views/grid"; @import "components/views/grid";
@import "components/views/grid/text"; @import "components/views/grid/text";