1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 04:46:40 +07:00

fixed gaps and radiuses

This commit is contained in:
Fedor Katurov 2021-12-26 10:49:10 +07:00
parent 782bafcc60
commit f63d2d3228
8 changed files with 62 additions and 29 deletions

View file

@ -76,9 +76,9 @@ const FlowStamp: FC<IProps> = ({
/> />
</form> </form>
<div className={styles.grid}>
{searchText ? ( {searchText ? (
<> <div className={styles.search_results}>
<div className={styles.grid}>
<div className={styles.label}> <div className={styles.label}>
<span className={styles.label_text}>Результаты поиска</span> <span className={styles.label_text}>Результаты поиска</span>
<span className="line" /> <span className="line" />
@ -92,9 +92,10 @@ const FlowStamp: FC<IProps> = ({
onLoadMore={onSearchLoadMore} onLoadMore={onSearchLoadMore}
/> />
</div> </div>
</> </div>
</div>
) : ( ) : (
<> <div className={styles.grid}>
<div className={classNames(styles.label, styles.whatsnew)}> <div className={classNames(styles.label, styles.whatsnew)}>
<span className={styles.label_text}>Что нового?</span> <span className={styles.label_text}>Что нового?</span>
<span className="line" /> <span className="line" />
@ -103,9 +104,8 @@ const FlowStamp: FC<IProps> = ({
<div className={styles.items}> <div className={styles.items}>
<FlowRecent updated={updated} recent={recent} /> <FlowRecent updated={updated} recent={recent} />
</div> </div>
</>
)}
</div> </div>
)}
{experimentalFeatures.liquidFlow && ( {experimentalFeatures.liquidFlow && (
<Superpower> <Superpower>

View file

@ -4,19 +4,19 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
background: lighten($content_bg, 4%);
border-radius: $radius; border-radius: $radius;
} }
.grid { .grid {
@include outer_shadow();
display: flex; display: flex;
justify-content: stretch; justify-content: stretch;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
border-radius: $radius; border-radius: $radius;
overflow: hidden;
position: relative; position: relative;
background: $content_bg; background: $content_bg;
overflow: hidden;
&::after { &::after {
content: ''; content: '';
@ -28,9 +28,11 @@
background: linear-gradient(transparentize($content_bg, 1), $content_bg 90%); background: linear-gradient(transparentize($content_bg, 1), $content_bg 90%);
pointer-events: none; pointer-events: none;
touch-action: none; touch-action: none;
}
@include outer_shadow(); @include tablet {
display: none;
}
}
} }
.items { .items {
@ -69,12 +71,12 @@
} }
.search { .search {
background: lighten($content_bg, 3%);
border-radius: $radius $radius 0 0;
padding: $gap;
@include outer_shadow(); @include outer_shadow();
background: lighten($content_bg, 3%);
padding: $gap;
border-radius: $radius;
:global(.input_title) { :global(.input_title) {
color: lighten($content_bg, 10%); color: lighten($content_bg, 10%);
} }
@ -123,3 +125,9 @@
display: none; display: none;
} }
} }
.search_results {
@include tablet {
margin-top: $gap;
}
}

View file

@ -23,13 +23,17 @@
} }
.container { .container {
@include container;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
font-weight: 500; font-weight: 500;
box-sizing: border-box; box-sizing: border-box;
@include container; @include tablet {
padding: 0 $gap;
}
} }
.spacer { .spacer {
@ -116,9 +120,8 @@
background: lighten($wisegreen, 10%); background: lighten($wisegreen, 10%);
} }
@include tablet { @include tablet {
padding: $gap; padding: 0 $gap * 2 0 0;
&.notifications { &.notifications {
flex: 1; flex: 1;

View file

@ -4,6 +4,10 @@ div.wrap {
display: flex; display: flex;
width: 100%; width: 100%;
margin-right: 0; margin-right: 0;
@include tablet {
padding: 0 $gap / 2;
}
} }
.column { .column {

View file

@ -126,6 +126,10 @@
padding: $gap; padding: $gap;
box-sizing: border-box; box-sizing: border-box;
flex: 0 0 auto; flex: 0 0 auto;
@include tablet {
border-radius: 0;
}
} }
&__title { &__title {
@ -154,6 +158,10 @@
position: relative; position: relative;
z-index: 1; z-index: 1;
flex: 3; flex: 3;
@include tablet {
border-radius: 0;
}
} }
.super_powers { .super_powers {

View file

@ -11,6 +11,10 @@ $cols: $content_width / $cell;
.container { .container {
@include container; @include container;
@include tablet {
padding: 0 $gap;
}
} }
.grid { .grid {

View file

@ -41,3 +41,9 @@
align-items: flex-end; align-items: flex-end;
justify-content: stretch; justify-content: stretch;
} }
.node {
@include tablet {
border-radius: 0;
}
}

View file

@ -328,7 +328,7 @@ $sidebar_border: transparentize(white, 0.95);
padding-right: $gap * 4; padding-right: $gap * 4;
@include tablet { @include tablet {
padding-left: $gap; padding-left: 0;
padding-right: $gap; padding-right: 0;
} }
} }