Quick Actions & global search (#528)
Co-authored-by: kolaente <k@knt.li> Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/528 Co-authored-by: konrad <konrad@kola-entertainments.de> Co-committed-by: konrad <konrad@kola-entertainments.de>
This commit is contained in:
@ -23,3 +23,4 @@
|
||||
@import 'api-config';
|
||||
@import 'datepicker';
|
||||
@import 'notifications';
|
||||
@import 'quick-actions';
|
||||
|
@ -72,6 +72,10 @@
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
|
||||
&-inline {
|
||||
position: static;
|
||||
}
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
display: block;
|
||||
|
@ -1,24 +1,16 @@
|
||||
.notifications {
|
||||
width: 50px;
|
||||
|
||||
.trigger {
|
||||
cursor: pointer;
|
||||
color: $grey-400;
|
||||
padding: 1rem;
|
||||
font-size: 1.25rem;
|
||||
position: relative;
|
||||
.unread-indicator {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: .75rem;
|
||||
width: .75rem;
|
||||
height: .75rem;
|
||||
|
||||
.unread-indicator {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: .75rem;
|
||||
width: .75rem;
|
||||
height: .75rem;
|
||||
|
||||
background: $primary;
|
||||
border-radius: 100%;
|
||||
border: 2px solid $white;
|
||||
}
|
||||
background: $primary;
|
||||
border-radius: 100%;
|
||||
border: 2px solid $white;
|
||||
}
|
||||
|
||||
.notifications-list {
|
||||
|
67
src/styles/components/quick-actions.scss
Normal file
67
src/styles/components/quick-actions.scss
Normal file
@ -0,0 +1,67 @@
|
||||
.quick-actions {
|
||||
|
||||
.modal-content {
|
||||
top: 6rem !important;
|
||||
transform: translate(-50%, -3rem) !important;
|
||||
}
|
||||
|
||||
.action-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.input {
|
||||
border: 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
&.has-active-cmd .input {
|
||||
padding-left: .5rem;
|
||||
}
|
||||
|
||||
.active-cmd {
|
||||
font-size: 1.25rem;
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.results {
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
color: $grey-800;
|
||||
|
||||
.result {
|
||||
&-title {
|
||||
background: $grey-50;
|
||||
padding: .5rem;
|
||||
display: block;
|
||||
font-size: .75rem;
|
||||
}
|
||||
|
||||
&-items {
|
||||
button {
|
||||
font-size: .9rem;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
text-transform: none;
|
||||
font-family: $family-sans-serif;
|
||||
font-weight: normal;
|
||||
padding: .5rem .75rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus, &:hover {
|
||||
background: $grey-50;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $grey-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user