diff --git a/changelog/entries/unreleased/feature/1918_introduce_new_elevation_design.json b/changelog/entries/unreleased/feature/1918_introduce_new_elevation_design.json
new file mode 100644
index 000000000..28766a64e
--- /dev/null
+++ b/changelog/entries/unreleased/feature/1918_introduce_new_elevation_design.json
@@ -0,0 +1,7 @@
+{
+ "type": "feature",
+ "message": "Introduce new elevation design",
+ "issue_number": 1918,
+ "bullet_points": [],
+ "created_at": "2023-08-21"
+}
\ No newline at end of file
diff --git a/premium/web-frontend/modules/baserow_premium/assets/scss/components/row_comments.scss b/premium/web-frontend/modules/baserow_premium/assets/scss/components/row_comments.scss
index afa577d47..aa5110fdf 100644
--- a/premium/web-frontend/modules/baserow_premium/assets/scss/components/row_comments.scss
+++ b/premium/web-frontend/modules/baserow_premium/assets/scss/components/row_comments.scss
@@ -66,7 +66,7 @@
border-radius: 100%;
background-color: $color-primary-500;
color: $white;
- font-weight: bold;
+ font-weight: 600;
@include center-text(30px, 12px);
@@ -129,12 +129,10 @@
border-top-left-radius: 3px;
word-wrap: break-word;
border: 1px solid $color-neutral-200;
- box-shadow: 0 1px 2px rgba(19, 45, 69, 0.1);
- -webkit-box-shadow: 0 1px 2px rgba(19, 45, 69, 0.1);
- -moz-box-shadow: 0 1px 2px rgba(19, 45, 69, 0.1);
white-space: pre-line;
@include rounded($rounded-md);
+ @include add-elevation($elevation-low);
.auto-expandable-textarea {
font-size: 13px;
@@ -148,8 +146,6 @@
margin-right: 0;
border-top-right-radius: 3px;
box-shadow: none;
- -webkit-box-shadow: none;
- -moz-box-shadow: none;
@include rounded($rounded-md);
}
@@ -247,9 +243,10 @@
background: white;
padding: 8px 12px;
border: 1px solid $color-neutral-200;
- box-shadow: 0 1px 2px rgba(19, 45, 69, 0.1);
border-radius: 80px;
- font-weight: 600;
+ font-weight: 500;
+
+ @include add-elevation($elevation-low);
}
}
diff --git a/premium/web-frontend/modules/baserow_premium/assets/scss/components/views/calendar/calendar_card.scss b/premium/web-frontend/modules/baserow_premium/assets/scss/components/views/calendar/calendar_card.scss
index 1b9d06d89..8002becc0 100644
--- a/premium/web-frontend/modules/baserow_premium/assets/scss/components/views/calendar/calendar_card.scss
+++ b/premium/web-frontend/modules/baserow_premium/assets/scss/components/views/calendar/calendar_card.scss
@@ -1,11 +1,11 @@
.calendar-card {
border: 1px solid $color-neutral-200;
- box-shadow: 0 1px 2px rgba($color-primary-900, 0.1);
color: $color-primary-900;
height: 26px;
margin-bottom: 2px;
@include rounded($rounded);
+ @include add-elevation($elevation-low);
> div {
@include rounded($rounded);
diff --git a/premium/web-frontend/modules/baserow_premium/assets/scss/components/views/calendar/calendar_month_day.scss b/premium/web-frontend/modules/baserow_premium/assets/scss/components/views/calendar/calendar_month_day.scss
index 9b88f500c..456e1e02d 100644
--- a/premium/web-frontend/modules/baserow_premium/assets/scss/components/views/calendar/calendar_month_day.scss
+++ b/premium/web-frontend/modules/baserow_premium/assets/scss/components/views/calendar/calendar_month_day.scss
@@ -51,7 +51,6 @@
.calendar-month-day__create-row-btn {
border: 1px solid $color-neutral-200;
- box-shadow: 0 1px 2px rgba($color-primary-900, 0.1);
display: flex;
justify-content: center;
align-items: center;
@@ -61,6 +60,7 @@
visibility: hidden;
@include rounded($rounded);
+ @include add-elevation($elevation-low);
&:hover {
text-decoration: none;
diff --git a/premium/web-frontend/modules/baserow_premium/assets/scss/components/views/kanban.scss b/premium/web-frontend/modules/baserow_premium/assets/scss/components/views/kanban.scss
index 4a6b5fa2c..601a4ec46 100644
--- a/premium/web-frontend/modules/baserow_premium/assets/scss/components/views/kanban.scss
+++ b/premium/web-frontend/modules/baserow_premium/assets/scss/components/views/kanban.scss
@@ -167,7 +167,8 @@
&:not(.kanban-view__stack-card--disabled):not(.kanban-view__stack-card--dragging):hover {
cursor: pointer;
- box-shadow: 0 1px 3px 0 rgba($black, 0.32);
+
+ @include add-elevation($elevation-medium);
}
}
diff --git a/web-frontend/.stylelintrc b/web-frontend/.stylelintrc
index 89c8de00e..a9cdaed58 100644
--- a/web-frontend/.stylelintrc
+++ b/web-frontend/.stylelintrc
@@ -1,8 +1,5 @@
{
- "extends": [
- "stylelint-config-standard",
- "stylelint-config-prettier"
- ],
+ "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
"rules": {
"at-rule-no-unknown": [
true,
@@ -12,6 +9,7 @@
"function",
"if",
"each",
+ "else",
"include",
"mixin",
"return",
diff --git a/web-frontend/modules/core/assets/scss/components/alert.scss b/web-frontend/modules/core/assets/scss/components/alert.scss
index 20c155cce..3a1fb6afc 100644
--- a/web-frontend/modules/core/assets/scss/components/alert.scss
+++ b/web-frontend/modules/core/assets/scss/components/alert.scss
@@ -18,7 +18,7 @@
}
&.alert--with-shadow {
- box-shadow: 0 2px 6px 0 rgba($black, 0.16);
+ @include add-elevation($elevation-medium);
}
}
diff --git a/web-frontend/modules/core/assets/scss/components/box.scss b/web-frontend/modules/core/assets/scss/components/box.scss
index 6e52ed731..9b1309ecb 100644
--- a/web-frontend/modules/core/assets/scss/components/box.scss
+++ b/web-frontend/modules/core/assets/scss/components/box.scss
@@ -1,7 +1,8 @@
.box {
background-color: $white;
- box-shadow: 0 3px 10px 0 rgba($black, 0.16);
padding: 32px 40px;
+
+ @include add-elevation($elevation-medium);
@include rounded($rounded-md);
}
diff --git a/web-frontend/modules/core/assets/scss/components/card.scss b/web-frontend/modules/core/assets/scss/components/card.scss
index 6fbd04034..c05b51f7f 100644
--- a/web-frontend/modules/core/assets/scss/components/card.scss
+++ b/web-frontend/modules/core/assets/scss/components/card.scss
@@ -17,7 +17,8 @@
.card {
position: relative;
background-color: $white;
- box-shadow: 0 1px 3px 0 rgba($black, 0.16);
+
+ @include add-elevation($elevation-low);
@include rounded($rounded);
&--loading {
diff --git a/web-frontend/modules/core/assets/scss/components/context.scss b/web-frontend/modules/core/assets/scss/components/context.scss
index cad2dd4af..5f43bdf6d 100644
--- a/web-frontend/modules/core/assets/scss/components/context.scss
+++ b/web-frontend/modules/core/assets/scss/components/context.scss
@@ -4,7 +4,8 @@
white-space: nowrap;
background-color: $white;
border: 1px solid $color-neutral-200;
- box-shadow: 0 2px 6px 0 rgba($black, 0.16);
+
+ @include add-elevation($elevation-medium);
@include rounded($rounded-md);
&.context--loading-overlay {
diff --git a/web-frontend/modules/core/assets/scss/components/datepicker.scss b/web-frontend/modules/core/assets/scss/components/datepicker.scss
index 86696d0fa..ea654754b 100644
--- a/web-frontend/modules/core/assets/scss/components/datepicker.scss
+++ b/web-frontend/modules/core/assets/scss/components/datepicker.scss
@@ -6,9 +6,10 @@
}
.vdp-datepicker.datepicker .vdp-datepicker__calendar {
- border-color: $color-neutral-200;
+ border: none;
width: 278px;
padding: 10px;
+
@include rounded($rounded-md);
.prev,
diff --git a/web-frontend/modules/core/assets/scss/mixins/add_elevation.scss b/web-frontend/modules/core/assets/scss/mixins/add_elevation.scss
new file mode 100644
index 000000000..f9abaffb0
--- /dev/null
+++ b/web-frontend/modules/core/assets/scss/mixins/add_elevation.scss
@@ -0,0 +1,3 @@
+@mixin add-elevation($box-shadow) {
+ box-shadow: $box-shadow;
+}
diff --git a/web-frontend/modules/core/assets/scss/mixins/all.scss b/web-frontend/modules/core/assets/scss/mixins/all.scss
index 661a2b722..21bfe40e8 100644
--- a/web-frontend/modules/core/assets/scss/mixins/all.scss
+++ b/web-frontend/modules/core/assets/scss/mixins/all.scss
@@ -3,6 +3,7 @@
@import 'button';
@import 'filters';
@import 'add_shadow';
+@import 'add_elevation';
@import 'select_option';
@import 'collaborator';
@import 'roundness';
diff --git a/web-frontend/modules/core/assets/scss/variables.scss b/web-frontend/modules/core/assets/scss/variables.scss
index 48fb9bd04..9fe0a62c0 100644
--- a/web-frontend/modules/core/assets/scss/variables.scss
+++ b/web-frontend/modules/core/assets/scss/variables.scss
@@ -37,6 +37,10 @@ $rounded-xl: 12px !default;
$rounded-2xl: 16px !default;
$rounded-3xl: 24px !default;
+$elevation-low: 0 1px 2px 0 rgba($palette-neutral-1300, 0.1) !default;
+$elevation-medium: 0 6px 12px 0 rgba($palette-neutral-1300, 0.08) !default;
+$elevation-high: 0 1px 2px 0 rgba($palette-neutral-1300, 0.1) !default;
+
// API docs variables
$api-docs-nav-width: 220px !default;
$api-docs-header-height: 52px !default;