profi248/frontend
1
0
Fork 0
forked from vikunja/frontend
Code Issues Pull Requests Projects Releases Wiki Activity

Fix create new bucket button having no margin to the right

Browse Source
This commit is contained in:
kolaente 2020-08-11 20:57:55 +02:00
parent d95571309b
commit 0ae73c906d
Signed by untrusted user: konrad
GPG Key ID: F40E70337AB24C9B
1 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/styles/components/kanban.scss
View File

@ -1,6 +1,7 @@
$bucket-background: #e8f0f5; $bucket-background: #e8f0f5;
$task-background: $white; $task-background: $white;
$ease-out: all .3s cubic-bezier(0.23, 1, 0.32, 1); $ease-out: all .3s cubic-bezier(0.23, 1, 0.32, 1);
$bucket-width: 300px;
$crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 8px'; $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 8px';
@ -24,11 +25,11 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 8px';
border-radius: $radius; border-radius: $radius;
position: relative; position: relative;
flex: 0 0 300px; flex: 0 0 $bucket-width;
margin: 0 1em 0 0; margin: 0 1em 0 0;
max-height: 100%; max-height: 100%;
min-height: 20px; min-height: 20px;
max-width: 300px; max-width: $bucket-width;
.tasks { .tasks {
max-height: calc(#{$crazy-height-calculation} - 1rem - 2.5rem - 2em - #{$button-height} - 1em); max-height: calc(#{$crazy-height-calculation} - 1rem - 2.5rem - 2em - #{$button-height} - 1em);
@ -41,11 +42,11 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 8px';
} }
-webkit-touch-callout: none; // iOS Safari -webkit-touch-callout: none; // iOS Safari
-webkit-user-select: none; // Safari -webkit-user-select: none; // Safari
-khtml-user-select: none; // Konqueror HTML -khtml-user-select: none; // Konqueror HTML
-moz-user-select: none; // Old versions of Firefox -moz-user-select: none; // Old versions of Firefox
-ms-user-select: none; // Internet Explorer/Edge -ms-user-select: none; // Internet Explorer/Edge
user-select: none; // Non-prefixed version, currently supported by Chrome, Opera and Firefox user-select: none; // Non-prefixed version, currently supported by Chrome, Opera and Firefox
transition: $ease-out; transition: $ease-out;
cursor: pointer; cursor: pointer;
@ -199,13 +200,17 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 8px';
} }
&.new-bucket { &.new-bucket {
// Because of reasons, this button ignores the margin we gave it to the right.
background: $bucket-background; // To make it still look like it has some, we modify the container to have a padding of 1rem,
display: block; // which is the same as the margin it should have. Then we make the container itself bigger
// to hide the fact we just made the button smaller.
min-width: calc(#{$bucket-width} + 1rem);
background: transparent;
padding-right: 1rem;
.button { .button {
background: $bucket-background;
width: 100%; width: 100%;
background: transparent;
} }
} }
} }