Refactor App.scss
@@ -101,54 +101,6 @@ $content-height: calc(100vh - 43px); // height of .menu sums up to 43px
background-color: white;
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.28);
transition: all 0.5s ease-in-out;
- &--hidden {
- right: -100vw;
- }
- &--header {
- height: 35px;
- background-color: #88c7ff;
- display: flex;
- align-items: center;
- padding: 5px;
- &--icon {
- cursor: pointer;
- }
- &--reset {
- height: 100%;
- background-color: rgba(255, 255, 255, 0.5);
- border: none;
- cursor: initial;
- &-icon {
- position: absolute;
- right: 15px;
- cursor: pointer;
- }
- &:disabled {
- display: inline-block;
- background: none;
- border: none;
- color: black;
- font-weight: 600;
- .hide {
- display: none;
- }
- }
- }
- }
- &--container {
- display: flex;
- flex-direction: column;
- align-items: center;
- text-align: center;
-
- h4 {
- max-width: 90%;
- }
-
- .hidden {
- display: none !important;
- }
-
.filter-card {
width: calc(100% - 50px);
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.28);
@@ -165,6 +117,15 @@ $content-height: calc(100vh - 43px); // height of .menu sums up to 43px
&--list {
list-style: none;
}
+ .task-id-filters {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ input {
+ margin-bottom: 15px;
+ }
+ }
}
&--range {
&-container {
@@ -214,6 +175,53 @@ $content-height: calc(100vh - 43px); // height of .menu sums up to 43px
}
}
}
+ &--hidden {
+ right: -100vw;
+ }
+ &--header {
+ height: 35px;
+ background-color: #88c7ff;
+ display: flex;
+ align-items: center;
+ padding: 5px;
+ &--icon {
+ cursor: pointer;
+ }
+ &--reset {
+ height: 100%;
+ background-color: rgba(255, 255, 255, 0.5);
+ border: none;
+ cursor: initial;
+ &-icon {
+ position: absolute;
+ right: 15px;
+ cursor: pointer;
+ }
+ &:disabled {
+ display: inline-block;
+ background: none;
+ border: none;
+ color: black;
+ font-weight: 600;
+ .hide {
+ display: none;
+ }
+ }
+ }
+ }
+ &--container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+
+ h4 {
+ max-width: 90%;
+ }
+
+ .hidden {
+ display: none !important;
+ }
.filter-add-button {
background-color: #71bcff;
