platform/packages/theme/styles/dialogs.scss
Alexander Platov 89ecba6b9a
UBER-199,-217,-232: fixed header in ListView, EditMember, ViewOptions (#3273)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
2023-05-29 13:20:07 +07:00

280 lines
6.0 KiB
SCSS

//
// Copyright © 2021 Anticrm Platform Contributors.
//
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License. You may
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//
// See the License for the specific language governing permissions and
// limitations under the License.
//
/* Overlays */
.antiOverlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: var(--theme-overlay-color);
pointer-events: all;
}
/* Cards */
.antiCard {
display: flex;
flex-direction: column;
min-height: 0;
background: var(--theme-popup-color);
border-radius: .5rem;
box-shadow: var(--theme-popup-shadow);
.antiCard-header {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
&.withSub { padding: 1.5rem 1.5rem 0; }
&:not(.withSub) { padding: 1.5rem 1.5rem 1rem; }
&__title-wrap {
display: flex;
align-items: center;
min-width: 0;
& > *:not(:last-child) { margin-right: .5rem; }
}
&__title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
user-select: none;
min-width: 0;
line-height: 150%;
color: var(--theme-caption-color);
&.accentHeader { font-size: 1rem; }
}
&__divider { color: var(--theme-dark-color); }
&__error {
min-width: 0;
flex-grow: 1;
position: absolute;
display: flex;
top: 2.5rem;
left: 1rem;
right: 1rem;
font-weight: 500;
font-size: .75rem;
color: var(--system-error-color);
&:empty { visibility: hidden; }
}
}
.antiCard-subheader {
display: flex;
align-items: center;
flex-shrink: 0;
padding: .5rem 1.5rem 1rem;
min-width: 0;
min-height: 0;
}
.antiCard-content {
display: flex;
flex-direction: column;
flex-grow: 1;
flex-shrink: 1;
// margin: 1.5rem 1.5rem .5rem;
height: fit-content;
min-width: 0;
min-height: 0;
}
.antiCard-pool {
flex-shrink: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
margin: .5rem 1.5rem 1.5rem;
min-width: 0;
font-size: .8125rem;
color: var(--theme-caption-color);
&::after {
content: '';
width: 100%;
order: 0;
}
&__separator {
flex-shrink: 0;
margin-top: 1.5rem;
height: 1px;
background-color: var(--theme-popup-divider);
}
& > * { margin: .5rem .5rem 0 0; }
.new-line {
min-width: 0;
order: 1;
}
}
.antiCard-attachments {
background-color: var(--theme-bg-accent-color);
border-top: 1px solid var(--theme-popup-divider);
&__container {
display: flex;
align-items: center;
margin: 1rem 1.5rem;
& > * { margin-right: 1rem; }
& > *:last-child { margin-right: 1.5rem; }
}
}
.antiCard-footer {
overflow: hidden;
flex-shrink: 0;
direction: ltr;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
height: 4.25rem;
border-radius: 0 0 .5rem .5rem;
&.divide { border-top: 1px solid var(--theme-popup-divider); }
&.reverse { flex-direction: row-reverse; }
&__error {
flex-grow: 1;
display: flex;
margin-left: .375rem;
min-width: 0;
font-weight: 500;
font-size: .75rem;
color: var(--system-error-color);
&:empty { visibility: hidden; }
}
}
.antiCard-menu__item {
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
margin: 0 .5rem;
padding: .25rem .5rem;
min-width: 0;
min-height: 2.5rem;
border-radius: .25rem;
&.hoverable{
cursor: pointer;
&:hover { background-color: var(--theme-popup-hover); }
}
span {
margin-right: .5rem;
color: var(--theme-caption-color);
}
}
.antiCard-menu__spacer {
flex-shrink: 0;
height: .5rem;
}
.antiCard-menu__divider {
flex-shrink: 0;
margin: .5rem 0;
height: 1px;
background-color: var(--theme-popup-divider);
}
.antiCard-group {
padding: .5rem 1rem;
&:not(:last-child) { border-bottom: 1px solid var(--theme-divider-color); }
&.grid {
display: grid;
grid-template-columns: 5rem auto;
grid-auto-rows: minmax(2rem, auto);
column-gap: .5rem;
.label {
display: flex;
align-items: center;
text-align: left;
font-weight: 500;
font-size: .75rem;
line-height: .75rem;
color: var(--theme-content-color);
}
.value {
display: flex;
align-items: center;
justify-content: flex-end;
}
}
}
&.dialog {
height: auto;
max-height: inherit;
&.large { // 720
width: 45rem;
max-width: 60rem;
}
&.medium { // 600
width: 37.5rem;
max-width: 37.5rem;
}
&.small { // 480
width: 30rem;
max-width: 30rem;
}
&.x-small { // 400
width: 25rem;
max-width: 25rem;
}
&.menu { // 280
width: 17.5rem;
max-width: 17.5rem;
}
&.full {
width: max-content;
// max-width: 100%;
}
}
&.mobile {
width: 90vw;
max-width: 90vw;
max-height: 90vh;
.antiCard-header {
padding: .75rem .75rem .375rem;
&__divider, &__title {
font-weight: 400;
font-size: .8125rem;
}
}
.antiCard-content { margin: .5rem 1.125rem 1rem; }
.antiCard-pool {
flex-direction: row;
align-items: center;
margin: 0 .5rem .25rem;
font-size: .75rem;
}
.antiCard-footer {
padding: .75rem;
height: auto;
}
}
}