highperfocused/bitmappery
1
0
Fork 0
mirror of https://github.com/igorski/bitmappery.git synced 2026-07-28 01:37:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fixed broken modal and panel stylings after SASS migration

Browse Source
This commit is contained in:
Igor Zinken
2025-02-18 20:39:01 +01:00
parent c34e0ecd65
commit 4ba2da3670
4 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/layer-filters/layer-filters.vue
View File

@@ -335,8 +335,7 @@ export default {
display: flex;
flex-direction: column;
.component__content {
padding: variables.$spacing-small 0;
:deep(.component__content) {
@include mixins.boxSize();
@include mixins.truncate();
border-bottom: 1px solid colors.$color-lines;

2
src/components/layer-panel/layer-panel.vue
View File

@@ -409,7 +409,7 @@ export default {
outline: none;
}
.component__content.form {
:deep(.component__content) {
padding: 0;
}

13
src/components/modal/modal.vue
View File

@@ -81,36 +81,37 @@ export default {
background-image: colors.$color-window-bg;
$headerHeight: 48px;
.component__header {
:deep(.component__header) {
height: $headerHeight;
padding: #{variables.$spacing-xsmall + variables.$spacing-small} variables.$spacing-medium 0 #{variables.$spacing-medium + variables.$spacing-small};
border: none;
}
.component__title {
:deep(.component__title) {
@include typography.customFont();
color: #FFF;
padding-left: 0;
}
.component__header-button {
:deep(.component__header-button) {
@include ui.closeButton();
top: #{variables.$spacing-xsmall + variables.$spacing-small};
right: #{variables.$spacing-medium + variables.$spacing-small};
}
.component__content {
:deep(.component__content) {
position: relative;
height: calc(100% - #{$headerHeight});
padding: variables.$spacing-medium #{variables.$spacing-medium + variables.$spacing-small};
}
.component__content-wrapper {
:deep(.component__content-wrapper) {
overflow-x: hidden;
overflow-y: auto;
height: inherit;
}
.component__actions {
:deep(.component__actions) {
@include ui.actionsFooter();
}
}

12
src/styles/panel.scss
View File

@@ -13,14 +13,14 @@ $collapsed-panel-height: 40px; // mobile view
height: 100%;
overflow: hidden;
.component__content {
:deep(.component__content) {
padding: variables.$spacing-small variables.$spacing-medium variables.$spacing-medium;
overflow-x: hidden;
overflow-y: auto;
}
@include mixins.mobile() {
.component__content {
:deep(.component__content) {
max-height: calc(100% - #{variables.$heading-height});
overflow-x: hidden;
overflow-y: auto;
@@ -29,7 +29,7 @@ $collapsed-panel-height: 40px; // mobile view
}
// overrides component mixin
.component__header-button {
:deep(.component__header-button) {
top: variables.$spacing-small - variables.$spacing-xxsmall;
right: variables.$spacing-small;
width: 36px;
@@ -41,7 +41,7 @@ $collapsed-panel-height: 40px; // mobile view
}
}
.component__actions {
:deep(.component__actions) {
margin: variables.$spacing-small 0;
padding: 0 variables.$spacing-medium;
box-sizing: border-box;
@@ -57,11 +57,11 @@ $collapsed-panel-height: 40px; // mobile view
@include mixins.large() {
width: $collapsed-panel-width;
.component__title {
:deep(.component__title) {
display: none;
}
}
.component__header-button {
:deep(.component__header-button) {
right: variables.$spacing-xxsmall;
}
}